Есть ли способ установить выравнивание текста всего столбца в таблице?

Question

Есть ли простой способ установить выравнивание текста всех ячеек во втором столбце до right?

Или это единственный способ установить выравнивание для каждой ячейки в столбце?

(К сожалению, атрибут тега colalign не поддерживается в Firefox.)

Answer 1

Добавьте класс в каждой клетке во 2-й колонке.

.second { 
    text-align: right; 
} 

Вы также можете использовать CSS3.

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

(Это не будет работать в < = IE8)

Answer 2

Добавление класса к каждой ячейке или ячейке в строке в столбце второй будет работать.

.second { 
    text-align: right; 
} 

или

добавить класс тр и добавьте следующий CSS в таблице стилей.

tr.second { 
    text-align: right; 
} 

Answer 3

Я считаю, что следующее будет работать и не требует аннотировать вторую ячейку каждой строки классом.

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

Это правило будет выбирать td сразу после td, который является первым дочерним элементом его родителя. В типичной таблице это будет выбирать вторую ячейку в каждой строке.

Answer 4

Бит поздно на вечеринку, но у меня просто была эта проблема, поэтому я решил поделиться разрешением. Стоит отметить, что этот ответ применим только в том случае, если вы используете LESS.

Вместо того, чтобы вручную добавить класс или стиль к каждой ячейке можно использовать петлю в LESS, чтобы создать ряд классов, которые вы можете применить к столам:

// 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); 

Это произведет нагрузку классы, такие как .table-center-col-1, вплоть до .table-center-col-16 (в этом примере), и они сделают центр текста применимой колонки. Он также сделает то же самое для текста с выравниванием по правому краю, с .table-right-col-n.

Вы можете отредактировать номер, поставленный (от 16), к чему-либо, чтобы гарантировать, что он покрывает вас для максимального количества столбцов, которые могут иметься в таблице. Для переменных столбцов столбцов это не поможет вам.

Тогда все, что вам нужно сделать, это применить его к столу:

<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> 

Все клетки в 4-м столбце будет теперь центрированный текст.

Answer 5

Хотя не особенно элегантно, я хотел, чтобы бросить что-то вроде этого в моем веб-узле файл 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 } 

Тогда просто указать, какой столбец номера вы хотите центр или выравнивание по правому краю, то есть, если вы хотите, колонка 2 & 7 выравнивание по правому краю, и 3 по центру, просто сделать:

<table class="tr2 tc3 tr7"> 

Хотя CSS не супер элегантный, альтернативы еще менее элегантен, то есть пользовательский класс для каждой таблицы, или требуя от каждого tr иметь class="ralign" или аналогичный.

Doesn't work with IE8