TH 不覆盖表格边框 (CSS+HTML)答案

【问题标题】：TH not overriding table border (CSS+HTML)TH 不覆盖表格边框 (CSS+HTML)
【发布时间】：2012-07-14 12:35:24
【问题描述】：

我希望表格的标题有红色实线边框，表格的其余部分有黑色虚线边框。

使用下面的代码，一切都是正确的，但 TH 的左侧和右侧是黑色点。有没有办法覆盖 TH 样式声明中的 <table> 边界？

这就是我想要实现的目标：

<style type="text/css">
table {
    border-style:none dotted dotted dotted;
    border-collapse: collapse;
}
table th {
    border: 2px solid red;
}
</style>

<table >
  <thead>
   <tr>
    <th>title 1</th>
    <th>title 2</th>
    <th>title 3</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
   </tr>
   <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
   </tr>
   <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
   </tr>
  </tbody>
</table>

【问题讨论】：

标签： html css html-table border

【解决方案1】：

试试这个 - http://jsfiddle.net/eaTLp/

table {
    border-style:none none dotted;
    border-collapse: collapse;
}

table th {
    border: 2px solid red;
}

table td:first-child {
    border-left: dotted;
}

table td:last-child {
    border-right: dotted;
}

您只在表格底部设置了虚线边框。在左侧和右侧，您通过:first-child 和:last-child 在每一行中选择第一个和最后一个<td>，并分别为它们分配左右边框。

【讨论】：

【解决方案2】：

如果可以接受，一个简单的解决方案是将th 边框宽度设置为等于或大于table 边框宽度。例如，添加

table { border-width: 2px; }

使他们平等。在您的示例中，宽度是初始值medium，通常在浏览器中映射为 3px 或 4px。

否则，需要不同的策略（参见 Zolthan Toth 的回答），即在 table 元素上没有设置左右边框的策略。

原因是根据[边界冲突解决][1] 规则，更宽的边界获胜（对于等宽边界，solid 胜过dotted）。

【讨论】：