используя текст-выровнять по центру в элемент 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;

}
514   4  

4 ответов:

только ограниченный набор свойств 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>.

107  
2010-11-13 04:00:33

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

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

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

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

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

24  
2017-05-23 14:47:22

С помощью следующего 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/

4  
2013-08-14 15:56:40

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

0  
2018-02-23 01:13:23

Comments

    Ничего не найдено.
Click here to cancel reply.