Форматирование столбца таблицы

Я пытаюсь отформатировать столбец в <table/>, используя элемент <col/>. Я могу установить background-color, width и т. д., но не могу установить font-weight. Почему это не работает?

<table>
    <col style="font-weight:bold; background-color:#CCC;">
    <col>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

css col css-tables
person Andy    schedule 01.10.2008    source источник

Ответы (6)


arrow_upward
36
arrow_downward

Насколько я знаю, вы можете форматировать только следующее с помощью CSS для элемента <col>:

  • фоновый цвет
  • граница
  • ширина
  • видимость

Эта страница содержит дополнительную информацию.

Херб прав - лучше стилизовать <td> напрямую. Я делаю следующее:

<style type="text/css">
   #mytable tr > td:first-child { color: red;} /* first column */
   #mytable tr > td:first-child + td { color: green;} /* second column */
   #mytable tr > td:first-child + td + td { color: blue;} /* third column */
   </style>
   </head>
   <body> 
   <table id="mytable">
    <tr>
      <td>text 1</td>
      <td>text 2</td>
      <td>text 3</td>
    </tr>
    <tr>
      <td>text 4</td>
      <td>text 5</td>
      <td>text 6</td>
    </tr>
    </table>

Однако это не будет работать в IE.

person Bill    schedule 01.10.2008
comment
Мне просто кажется, что вы немного усложняете проблему. Почему бы не создать красный, зеленый и синий класс? Это будет работать везде и будет гораздо более интуитивно понятным, чем расширенные селекторы CSS. - person Adam Lassek; 02.10.2008
comment
Да, вы правы, селекторы CSS уродливы :) Но я лично предпочел бы уродливые селекторы CSS, чем необходимость добавлять атрибут класса в каждую ячейку таблицы, особенно если у вас есть статическая таблица (т. е. не задействована генерация на стороне сервера), в которой много клетки. - person Bill; 02.10.2008
comment
Увы, это семантически сломает колспаны. В этом весь смысл элементов col и colgroup, почему, черт возьми, вы не можете установить цвет, используя их?! - person Dan Dascalescu; 25.10.2012

arrow_upward
6
arrow_downward

Лучше всего применить стиль непосредственно к тегам <td>. Я никогда не использовал тег <col>, но большинство браузеров позволяют применять форматирование на уровне <table> и <td>/<th>, но не на промежуточном уровне. Например, если у вас есть

<table>
    <tr class="Highlight">
        <td>One</td>
        <td>Two</td>
    </tr>
    <tr>
        <td>A</td>
        <td>B</td>
    </tr>
</table>

тогда этот CSS не будет работать

tr.Highlight { background:yellow }

но это будет

tr.Highlight td { background:yellow }

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

person Herb Caudill    schedule 01.10.2008
comment
Этот метод отлично работает. Я просто пытался избежать добавления атрибута ‹code›class‹/code› для каждого первого столбца ‹code›td‹/code›. - person Andy; 01.10.2008

arrow_upward
2
arrow_downward

Возможно, вам просто нужно это:

tr td:first-child label {
    font-weight: bold;
}
person Paul    schedule 13.11.2014

arrow_upward
1
arrow_downward

Читая это, я пытался стилизовать таблицу так, чтобы первый столбец был жирным, а остальные четыре столбца - обычным текстом. Использование тега col казалось правильным, но хотя я мог установить ширину столбцов с помощью атрибута ширины, шрифт font-weight: полужирный не работал. Спасибо, что указали мне направление решения. Стилизируя все элементы td td {font-weight: bold;}, а затем используя соседний родственный селектор, чтобы выбрать столбцы 2-5 и вернуть их к нормальному виду td + td {font-weight: normal;} Вуаля, все хорошо :)

person Herbt    schedule 16.01.2010

arrow_upward
0
arrow_downward

Вы пытались применить стиль через класс CSS?

Похоже, работает следующее:

<style type="text/css"> 
  .xx {
  background: yellow;
  color: red;
  font-weight: bold;
  padding: 0 30px;
  text-align: right;
}

<table border="1">
  <col width="150" />
  <col width="50" class="xx" />
  <col width="80" />
<thead>
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    </tr>
</tbody>
</table>

Справочник по элементу col

person mwilliams    schedule 01.10.2008
comment
Обратите внимание, что IE (режим Quirks) позволяет работать с цветом. См. quirksmode.org/css/columns.html. Но это не решение, к сожалению. - person Alex Nolasco; 13.06.2011

arrow_upward
-1
arrow_downward

Тег col должен находиться внутри тега colgroup. Это может быть связано с проблемой.

person Philip Morton    schedule 01.10.2008
comment
Как сказал Энди, но хочу убедиться, что он прикреплен к оригиналу (и он пока не может комментировать). col НЕ ДОЛЖЕН находиться в colgroup. ‹a href=w3.org/TR/ html401/struct/tables.html#h-11.2.4.2›W3C Ссылка‹/a› - person Mikezx6r; 01.10.2008