<col class = "slick"> не применяет класс к столбцам таблицы - PullRequest
Новая
       29

<col class = "slick"> не применяет класс к столбцам таблицы

3 голосов
/ 04 октября 2010

Мое понимание col - это то, что он может использоваться для указания класса для всех элементов в столбце таблицы.Это, похоже, не работает для меня, хотя.Я могу применить класс к отдельным td, но я хочу, чтобы col помог мне избежать этого.

Вот HTML-заголовок: 

<head>
<style type="text/css">
 .slick {
  background-color:#b0c4de; /*This always works*/
  border-style:solid; /*This doesn't work when only applied to a <col>*/
  border-width:5px;
 }
</style>
</head>

Интересно, что цвет фона всегда работает, ноГраница иногда терпит неудачу.

Вот HTML-тело: 

<body>
<table><tbody>
 <colgroup>
  <col class="slick" />
  <col class="slick" />
 </colgroup>
 <tr id="r1">
  <td><label >Planner/Scheduler/Estimators</label></td>
  <td class="slick"><label >2010</label></td>
 </tr>
</tbody></table>
</body>

Удаление тегов tbody или colgroup, похоже, не имеет значения.Фон присутствует в обоих элементах;граница применяется только ко второму элементу, где класс указан в теге td.

Я догадывался, что граница не будет работать с col, но Firebug показывает, что стиль slick не применяетсяв левую колонку вообще.Что не так?

Ответы [ 3 ]

4 голосов
/ 04 октября 2010

Согласно школам w3, в Firefox работает только атрибут ширины.Также не похоже, что атрибут border поддерживается вообще.

http://www.w3schools.com/tags/tag_col.asp

0 голосов
/ 15 января 2018

Вам не нужно применять классы к каждому тд.

Вы можете просто оформить тд: 

 td {
  background-color:#b0c4de;
  border-style:solid;
  border-width:5px;
 }
0 голосов
/ 25 августа 2015

Это связано с тем, что спецификация CSS 2.1 определяет , что различные свойства границы применяются, только когда вы устанавливаете border-collapse: collapse; для соответствующего элемента <table>.

Кроме того, в соответствии с CSS 2.1 существует очень мало свойств, которые можно использовать для стиля столбцов (с ограничениями):

  • свойства границы (требуется border-collapse: collapse; для связанного элемента <table>)
  • свойства фона (применяется только в том случае, если фон ячейки и строки прозрачен)
  • width
  • visibility (значение collapse избегает рендеринга ячеек, ячейки, охватывающие другие столбцы, обрезаются)
...