html - TH 不覆盖表格边框 (CSS+HTML)

Question

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

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

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

<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>

Answer 1

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

table { border-width: 2px; }

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

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

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

Answer 2

试试这个 - 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;
}
​

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