usando text-align center en colgroup

Question

tengo una tabla en mi página, uso colgroups para formatear todas las celdas de 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

Sólo a limited set of CSS properties applies to columns y text-align no es uno de ellos.

Consulte "The mystery of why only four properties apply to table columns" 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 añadir estas reglas:

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

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

Ah, y su HTML no es válido. <thead> falta un <tr>.

Answer 2

Ver pregunta similar: Why is styling table columns not allowed?

Sólo se le permite establecer frontera, fondo, ancho y visibilidad propiedades, debido al hecho de que las células no son descendientes directos de columnas, solo de filas

Existen 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 admiten el selector :nth-child(n) para que pueda orientar columnas específicas.

También es posible usar td+td para seleccionar en la segunda columna en adelante (que en realidad significa "seleccionar todos td elementos que tienen una td elemento a su izquierda) td+td+td selecciona a partir de la tercera columna -. Puede continuar de esta manera, anulando Sin embargo, sinceramente, no es un gran código.

Answer 3

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 4

Además de las limitaciones mencionadas en otras respuestas, a partir de febrero 2018, la visibilidad: colapso aún no funciona en colgroups en navegadores basados ​​en Chrome y Chromium, debido a un error. Ver "CSS col visibility:collapse does not work on 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.