3

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

4

3 回答 3

4

根据 w3 学校的说法，只有 width 属性在 Firefox 中有效。看起来也不支持border属性。

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

于 2010-10-04T17:05:04.547 回答
0

这是因为CSS 2.1 规范定义border-collapse: collapse;了不同的边框属性仅在您设置相关<table>元素时才适用。

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

  • 边框属性（需要border-collapse: collapse;相关<table>元素）
  • 背景属性（仅在单元格和行背景透明时适用）
  • width
  • visibility（值collapse避免了单元格的渲染，跨越到其他列的单元格被剪裁）
于 2015-08-25T20:55:44.163 回答
0

您不必对每个 td 应用类。

您可以简单地设置 td 的样式：

 td {
  background-color:#b0c4de;
  border-style:solid;
  border-width:5px;
 }
于 2018-01-15T12:33:49.890 回答