использование выравнивания текста по центру в colgroup

Question

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

пример:

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

Answer 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> пропускает <tr>.

Answer 2

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

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

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

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

Вы также можете использовать td+td выбрать из второго столбца и далее (на самом деле это означает «выбрать все td элементы, имеющие один td элемент слева от него). td+td+td выбирает из третьего столбца — вы можете продолжать в том же духе, переопределяя свойства.Честно говоря, это не лучший код.

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

Answer 4

В дополнение к ограничениям, упомянутым в других ответах, по состоянию на февраль 2018 года видимость: свернуть все еще не работает в группах коллапсов в браузерах Chrome и Chromium из-за ошибки.Видеть "Видимость CSS col: свернуть не работает в Chrome".Поэтому я считаю, что в настоящее время используемые свойства — это просто граница, фон и ширина (если только вы не используете какой-либо полифил для Chrome и других браузеров на основе Chromium).Ошибку можно отследить по адресу https://crbug.com/174167 .