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

Ответ 1

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

.second {
   text-align: right;
}

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

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

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

Ответ 2

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

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

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

Ответ 3

Не особенно элегантный, мне нравится бросать что-то подобное в моем файле 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" или аналогичный.

Не работает с IE8

Ответ 4

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

.second {
   text-align: right;
}

или

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

tr.second {
   text-align: right;
}

Ответ 5

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

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

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

    [email protected]{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>

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