html+css 表格 - tr 的边框底部与 td/th 的边框右侧重叠

Posted 2023-03-05

【中文标题】html+css 表格 - tr 的边框底部与 td/th 的边框右侧重叠

【英文标题】：html+css tables - border-bottom of tr overlaps border-right of td/th

【发布时间】：2013-11-17 15:43:17

【问题描述】：

这是我当前代码的示例：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;

【问题讨论】：

如果你把边框缩小到 2px 那么它会很好地折叠。我会对此进行更多研究，但现在这里有一个 jsFiddle 工作：jsfiddle.net/mzALe/7

@Martin good place 似乎将最高宽度的边框放在较低的边框上

另外，不要设置 TR 样式。如果你真的想保存每个单元格右侧的 3px 边框宽度，你总是可以这样做 td> 直接在你的 TR 下方，带有 TH。

@Martin 谢谢，它成功了。最好保留 3px 边框而不是 2px 边框。我对这个解决方案很好奇。现在我会用你的:)

【参考方案1】：

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

看到这个jsFiddle

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

【参考方案2】：

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

【讨论】：

你会失去第 th 单元格右侧之间的线。

【参考方案3】：

如何将您的最终样式更改为：

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

并移除较高的底部边框

【讨论】：

对@Parixit 的回答的评论让我失望了，但是是的，他的解决方案产生了与此相同的风格。

【参考方案4】：

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

请添加以下样式：

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

请在此处查看demo

【讨论】：

与其他答案一样，您将失去 th 单元格之间的界限。

@Martin 他想要标题单元格之间的边框吗？

问题没有具体说明，但因为他们之前就在那里，我假设是这样。

是的，我想要单元格之间的边界

【参考方案5】：

对于那些好奇的人，这里是good approach。

我使用了 Martin 解决方案 :)