TH不覆盖表边框（CSS + HTML）

Question

我希望桌子的标题有一个红色的实心边框，桌子的其余部分是黑色边框。

使用下面的代码，一切都是正确的，但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>

Answer 1

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

table { border-width: 2px; }

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

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

原因是根据[边界冲突解决] [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;
}
​

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