С помощью центра выравнивания текста в colgroup

У меня есть таблица на моей странице, я использую colgroups для форматирования всех ячеек в этом столбце одинаково, хорошо работает для цвета фона и всего. но, похоже, не может понять, почему центр выравнивания текста не работает. он не выравнивает текст по центру.

пример:

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

Ответ 1

Только ограниченный набор свойств CSS применяется к столбцам, а text-align не относится к ним.

См. "Тайна, почему только четыре свойства относятся к столбцам таблицы" для описания того, почему это так.

В вашем простом примере самым простым способом исправить это было бы добавить следующие правила:

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

Это будет центрировать все ячейки таблицы, кроме первого столбца. Это не работает в IE6, но в IE6 text-align действительно (неправильно) работает над столбцом. Я не знаю, поддерживает ли IE6 все свойства или просто большее подмножество.

О, и ваш HTML недопустим. <thead> пропускает a <tr>.

Ответ 2

См. аналогичный вопрос: Почему столбцы таблицы стилей не разрешены?

Вам разрешено устанавливать свойства border, фон, ширина и видимости, из-за того, что что ячейки не являются прямыми потомками столбцов, только из строк.

Есть несколько решений. Самое простое - добавить класс в каждую ячейку в столбце. К сожалению, это означает больше HTML, но не должно быть проблемой, если вы генерируете таблицы из базы данных и т.д.

Другим решением для современных браузеров (т.е. не IE6) является использование некоторых псевдо классов. tr > td:first-child выберет первую ячейку в строке. Opera, Safari, Chrome и Firefox 3.5 также поддерживают селектор :nth-child(n), поэтому вы можете настроить таргетинг на определенные столбцы.

Вы также можете использовать td+td для выбора из второго столбца вперед (это фактически означает "выбрать все элементы td, которые имеют один элемент td слева). td+td+td выбирает из третьего столбца - вы может продолжаться таким образом, переопределяя свойства. Честно говоря, это не отличный код.

Ответ 3

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

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>

Пример: http://jsfiddle.net/HHZsw/