Question

我对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显示光滑的样式根本不适用于左列。怎么了？

Answer 1

根据w3学校的说法，只有width属性适用于Firefox。它看起来根本不支持border属性。

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

Answer 2

这是因为CSS 2.1 specification defines只有在相关的border-collapse: collapse;元素上设置<table>时才会应用不同的边框属性。

此外，根据CSS 2.1，只有很少的属性可用于设置列的样式（有限制）：

边框属性（相关border-collapse: collapse;元素上需要<table>）
背景属性（仅在单元格和行背景透明时才适用）
width
visibility（值collapse避免渲染单元格，跨越其他列的单元格被裁剪）

Answer 3

您不必为每个td应用课程。

您可以简单地设置样式：

 td {
  background-color:#b0c4de;
  border-style:solid;
  border-width:5px;
 }

不会将类应用于表的列

3 个答案: