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

不是最好的答案，但它确实给你一个坚实的黑色边框，并保持较轻的一个在细胞之间。

Answer 2

您只需要为每个标题单元格提供底部边框。

请添加以下样式：


#prazo th {
    font-size: 16px;
    border-bottom: 3px solid #7d7d7d !important;
}

请在此处查看demo

Answer 3

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

从css上面删除以下行

border-right: 3px solid #F6F6F6;

Answer 4

如何将最终样式更改为：

#prazo th {
    font-size: 16px;
    border-bottom: 3px solid #7d7d7d !important;
    border-right:0 !important;
}

并删除更高的底部边框

Answer 5

对于那些好奇的人来说是good approach。

我用过Martin解决方案：）

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

5 个答案: