html+css tables - tr 的 border-bottom 与 td/th 的 border-right 重叠

Question

这是我当前代码的示例:jsfiddle

问题是，表头和正文之间的深灰色线被单元格的右边距截断了。我想在列之间有一个边界，在标题和正文表之间有一个不间断的边距。

这是 HTML:

<table id="prazo">
  <thead>
    <tr>
      <th>month</th>
      <th> val </th>
      <th> val </th>
      <th> val </th>
      <th> val </th>
      <th> val </th>
      <th>val</th>
    </tr>
  </thead>
  <tbody>
    <tr class="srow">
      <td>January</td>
      <td>$100</td>
      <td>$100</td>
      <td>$100</td>
      <td>$100</td>
      <td>$100</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>January</td>
      <td>$100</td>
      <td>$100</td>
      <td>$100</td>
      <td>$100</td>
      <td>$100</td>
      <td>$100</td>
    </tr>
    <tr class="srow">
      <td>January</td>
      <td>$100</td>
      <td>$100</td>
      <td>$100</td>
      <td>$100</td>
      <td>$100</td>
      <td>$100</td>
    </tr>
  </tbody>
</table>

和CSS:

#prazo {
    font-family: 'Bitter', serif;
    width: 100%;
    border-spacing:0;
    border-collapse:collapse;
}

#prazo thead tr{
    height: 50px;
    background-color: #ffffff;
    font-weight:bold;
    border-bottom: 3px solid #7d7d7d !important;
}



#prazo td, th {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 14px;
    height: 30px;
    background-color: #ffffff;
    border-right: 3px solid #f6f6f6;
}

.srow td {
    background-color: #f2f2f2 !important;
}

#prazo th {
    font-size: 16px;
}

Answer 1

我能想到的最好的办法是: 将深色边框的宽度增加到 4px (border-right: 4px solid #7d7d7d;)
或者
将另一个边框的宽度减小到 2px(border-right: 2px solid #f6f6f6;)。

查看此 jsFiddle

这不是最好的答案，但它确实为您提供了坚实的深色边框，并在第 th 个单元格之间保留了较亮的边框。