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

Question

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

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

(К сожалению, атрибут align тега col не поддерживается в 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) </p>

Answer 2

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

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

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

.second {
   text-align: right;
}

или

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

tr.second {
   text-align: right;
}