не применяет класс к столбцам таблицы

StackOverflow https://stackoverflow.com/questions/3857437

  •  27-09-2019
  •  | 
  •  

Вопрос

Мое понимание 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>

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

У меня была дошла, что граница не будет работать с COL, но Firebug показывает, что стиль Slick не применяется к левой колонке вообще. Что не так?

Это было полезно?

Решение

Согласно W3 школах, только атрибут Width работает в Firefox. Это также не похоже на атрибут границы поддерживаться вообще.

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

Другие советы

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

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

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

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

Вы можете просто стирать TD's:

 td {
  background-color:#b0c4de;
  border-style:solid;
  border-width:5px;
 }
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top