CSS样式html表列使用，级联帮助

Question

如何在桌面上设置一列没有任何边框？

我一直在使用带有id的<col/>标记，以便我可以使用CSS设置样式。 我的CSS示例：

#table td, th {
    vertical-align:middle;
    text-align:center;
    font-size:11px;
    border:1px solid #E0E0E0;
}
#col {
    width:300px;
    border:none !important;
}

上面应该使#table中的每个单元格都有边框，而！important声明应该覆盖上面的级联。我在这里做错了什么？

我通过制作每个<td id="col">并将我的col选择器更改为td#col来实现以下目标。我觉得这是做事的一种混乱方式，我希望通过不在每个td列中插入id标签来更好地控制我的表。

Answer 1

请参阅http://www.w3.org/TR/CSS21/tables.html#columns

您没有设置border-collapse属性：

  

只有在表格元素上将“border-collapse”设置为“collapse”时，各种边框属性才会应用于列。

然后，给出：

  

在这种情况下，在列和列组上设置的边框将输入到冲突解决算法，该算法在每个单元格边缘选择边框样式。

列两边的边框仍会影响：

  

风格为“无”的边框优先级最低。仅当在此边缘会合的所有元素的边界属性为“无”时，才会省略边框（但请注意，“无”是边框样式的默认值。）

因此，您最终只会移除受影响单元格的顶部和底部边框。