¿Hay alguna forma de establecer la alineación de texto de una columna completa en una tabla?

Question

¿Existe una manera simple de establecer la alineación de texto de todas las celdas de la segunda columna en right?

¿O la única forma es establecer la alineación para cada celda en la columna?

(Desafortunadamente, el atributo de la etiqueta aligncol No se admite en Firefox.)

Answer 1

agregar una clase a cada célula en la segunda columna.

.second { 
    text-align: right; 
} 

También podría usar CSS3.

tr td:nth-child(2) { /* I don't think they are 0 based */ 
    text-align: right; 
} 

(No funcionará en < = IE8)

Answer 2

Adición de una clase a cada célula o celda de una fila en la segunda columna va a funcionar.

.second { 
    text-align: right; 
} 

o

clase añadir a Tr y añadir el siguiente CSS en la hoja de estilo.

tr.second { 
    text-align: right; 
} 

Answer 3

Creo que lo siguiente funcionaría y no es necesario anotar la segunda celda de cada fila con una clase.

td:first-child + td { text-align: right; } 

Esta regla seleccionaría una td inmediatamente después de una td que es el primer elemento secundario de su elemento primario. En una tabla típica, esto seleccionaría la segunda celda en cada fila.

Answer 4

Poco antes de la fiesta, pero yo solo tenía este problema yo mismo, así que pensé en compartir una resolución. Vale la pena señalar que esta respuesta solo es aplicable si está usando LESS.

En lugar de tener que añadir manualmente la clase o estilo a cada célula puede utilizar bucles en menos de crear una serie de clases que se pueden aplicar a las tablas:

// Loop for @i until @i = @n 
// Much like - for($i=0; $i<=$n; $i++) 
// 
.table-cols(@n, @i: 1) when (@i =< @n) 
{ 
    .table-center-col-@{i} 
    { 
     tr > td:nth-child(@{i}) 
     { 
      text-align: center; 
     } 
    } 

    .table-right-col-@{i} 
    { 
     tr > td:nth-child(@{i}) 
     { 
      text-align: right; 
     } 
    } 

    // Continue the iteration 
    .table-cols(@n, (@i + 1)); 
} 

.table-cols(16); 

Esto producirá una carga de clases como .table-center-col-1 hasta .table-center-col-16 (en este ejemplo) y centrarán el texto de la columna aplicable. También hará lo mismo con el texto alineado a la derecha, con .table-right-col-n.

Puede ajustar el número suministrado (desde 16) a cualquier elemento para asegurarse de que cubre la cantidad máxima de columnas que puede tener en una tabla. Para los números de columnas variables, esto no será de mucha ayuda para usted.

Entonces todo lo que tiene que hacer es aplicar a la mesa: Texto

<table class="table-center-col-4"> 
    <thead> 
     <tr> 
      <td>Column 1</td> 
      <td>Column 2</td> 
      <td>Column 3</td> 
      <td>Column 4</td> 
      <td>Column 5</td> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>x</td> 
      <td>x</td> 
      <td>x</td> 
      <td>x</td> 
      <td>x</td> 
     </tr> 
    </tbody> 
</table> 

Todas las células en la cuarta columna ahora se han centrado.

Answer 5

Aunque no es particularmente elegante, me gusta tirar algo como esto en mi todo el sitio css:

.tr1 td:nth-child(1), .tr1 th:nth-child(1), 
.tr2 td:nth-child(2), .tr2 th:nth-child(2), 
.tr3 td:nth-child(3), .tr3 th:nth-child(3), 
.tr4 td:nth-child(4), .tr4 th:nth-child(4), 
.tr5 td:nth-child(5), .tr5 th:nth-child(5), 
.tr6 td:nth-child(6), .tr6 th:nth-child(6), 
.tr7 td:nth-child(7), .tr7 th:nth-child(7), 
.tr8 td:nth-child(8), .tr8 th:nth-child(8), 
.tr9 td:nth-child(9), .tr9 th:nth-child(9) { text-align:right } 

.tc1 td:nth-child(1), .tc1 th:nth-child(1), 
.tc2 td:nth-child(2), .tc2 th:nth-child(2), 
.tc3 td:nth-child(3), .tc3 th:nth-child(3), 
.tc4 td:nth-child(4), .tc4 th:nth-child(4), 
.tc5 td:nth-child(5), .tc5 th:nth-child(5), 
.tc6 td:nth-child(6), .tc6 th:nth-child(6), 
.tc7 td:nth-child(7), .tc7 th:nth-child(7), 
.tc8 td:nth-child(8), .tc8 th:nth-child(8), 
.tc9 td:nth-child(9), .tc9 th:nth-child(9) { text-align:center } 

A continuación, sólo especificar los números de columna que desea centro o alineados a la derecha, es decir, si quieres la columna 2 & 7 alineado a la derecha, y el centrado 3, acaba de hacer:

<table class="tr2 tc3 tr7"> 

Mientras que el CSS no es super elegante, las alternativas son aún menos elegante: es decir, una clase personalizada para cada mesa, o que requiere que cada tr tener una class="ralign" o similar.

Doesn't work with IE8