html - ejemplos - usando el centro text-align en colgroup

col html

Question

Tengo una tabla en mi página, uso colgroups para formatear todas las celdas en esta columna de la misma manera, funciona bien para el color de fondo y todo. pero parece que no puede entender por qué el centro text-align no funciona. no alinea el texto centrado.

ejemplo:

<table id="myTable" cellspacing="5">
    <colgroup id="names"></colgroup>
    <colgroup id="col20" class="datacol"></colgroup>
    <colgroup id="col19" class="datacol"></colgroup>
    <colgroup id="col18" class="datacol"></colgroup>

    <thead>
        <th>&nbsp;</th>
        <th>20</th>
        <th>19</th>
        <th>18</th>
    </thead>
    <tbody>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>

CSS:

#names {
    width: 200px;
}

#myTable .datacol {
    text-align: center;
    background-color: red;
}

Answer 1

Además de las limitaciones mencionadas en otras respuestas, a partir de febrero de 2018, visibilidad: el colapso aún no funciona en colgroups en los navegadores basados ​​en Chrome y Chromium, debido a un error. Consulte " Visibilidad de coll de CSS: el colapso no funciona en Chrome ". Por lo tanto, creo que las propiedades actualmente utilizables son solo borde, fondo, ancho (a menos que emplee algún tipo de polyfill para Chrome y otros navegadores basados ​​en Chromium). El error se puede rastrear en https://crbug.com/174167 .

Answer 2

Con el siguiente CSS, puede agregar una o más clases al elemento de la tabla para alinear sus columnas en consecuencia.

CSS

.col1-right td:nth-child(1) {text-align: right}
.col2-right td:nth-child(2) {text-align: right}
.col3-right td:nth-child(3) {text-align: right}

HTML

<table class="col2-right col3-right">
  <tr>
    <td>Column 1 will be left</td>
    <td>Column 2 will be right</td>
    <td>Column 2 will be right</td>
  </tr>
</table>

Ejemplo: http://jsfiddle.net/HHZsw/

Answer 3

Solo un conjunto limitado de propiedades de CSS se aplica a las columnas , y text-align no es una de ellas.

Consulte "El misterio de por qué solo cuatro propiedades se aplican a las columnas de la tabla" para obtener una descripción de por qué este es el caso.

En su ejemplo simple, la forma más fácil de solucionarlo sería agregar estas reglas:

#myTable tbody td { text-align: center }
#myTable tbody td:first-child { text-align: left }

Eso centraría todas las celdas de la tabla, excepto la primera columna. Esto no funciona en IE6, pero en IE6, text-align realmente funciona (erróneamente) en la columna. No sé si IE6 admite todas las propiedades o solo un subconjunto más grande.

Ah, y tu HTML no es válido. <thead> pierde un <tr> .

Answer 4

Ver pregunta similar: ¿Por qué no se permiten las columnas de la tabla de estilo?

Solo puede establecer las propiedades de borde , fondo , ancho y visibilidad , debido a que las celdas no son descendientes directos de columnas, solo de filas.

Hay algunas soluciones. Lo más simple es agregar una clase a cada celda en la columna. Desafortunadamente eso significa más HTML pero no debería ser un problema si está generando tablas desde una base de datos, etc.

Otra solución para los navegadores modernos (es decir, no IE6) es usar algunas pseudo clases. tr > td:first-child seleccionará la primera celda en una fila. Opera, Safari, Chrome y Firefox 3.5 también son compatibles con el selector :nth-child(n) para que pueda orientar columnas específicas.

También puede usar td+td para seleccionar desde la segunda columna en adelante (en realidad significa "seleccionar todos los elementos td que tienen un elemento td a su izquierda". td+td+td selecciona de la tercera columna - puede continuar de esta manera , propiedades primordiales. Honestamente, no es un gran código.