HTML 表格边框未正确显示答案

【问题标题】：HTML Table border isn't displayed correctlyHTML 表格边框未正确显示
【发布时间】：2022-01-04 12:06:55
【问题描述】：

此表格中的中间边框显示不正确。应该有一条连续的线，但它在标题中被剪掉了。

我不确定为什么会发生这种情况，并想了解如何以正确的方式做到这一点。

谢谢。

【问题讨论】：

标签： html css

【解决方案1】：

在您的表格中添加 border-spacing: 0; 我认为它会解决您的问题。你也可以使用 cellspacing="0"

来解决这个问题

【讨论】：

【解决方案2】：

将cellspacing="0" 添加到表中。

<table style="width:100%; text-align:center;" cellspacing="0">
<tr>
  <th><h4>Quick Links</h4></th>
  <th style="border-left: 2px solid black;"><h4>Pinned Versions</h4></th>
</tr>
...

https://plnkr.co/edit/03rKEE3pilBpF0gS?preview

【讨论】：

什么意思？这里有一个更新的工作版本：plnkr.co/edit/03rKEE3pilBpF0gS?preview
不再支持cellspacing 属性。 See this question.

【解决方案3】：

尝试对样式应用边框间距

<div style="width: 700px; box-shadow: 5px 5px 5px; outline-style: solid; color: black; background-color:#def8de; padding: 10px; border-radius: 15px; display: inline-block; font-family: Calibri">
<h1 style="text-align: center; text-style: bold">OC Group X Pipeline</h1>
<h3 style="color:darkgreen; text-align: center">Catalog Version: 21.12.22</h3>
<ul style="list-style-type:square;">
</ul>
<div style="color:black;border:1px solid black;"></div>

<table style="width:100%; text-align:center;border-spacing:0">
<tr>
  <th><h4>Quick Links</h4></th>
  <th style="border-left: 2px solid black;"><h4>Pinned Versions</h4></th>
</tr>

<tr>
<td style="text-align:left;">
<ul style="list-style-type:square; ">
<li><h4><a id="NS" style="color:blue;" href="X">OCP</a></h4></li>
<li><h4><a id="VB" style="color:blue;" href="X"</a></h4></li>
<li><h4><a id="BB" style="color:blue;" href="X">Bitbucket</a></h4></li>
<li><h4><a id="CB" style="color:blue;" href="X">Couchbase</a></h4></li>
</ul>
</td>

<!-- Pinned Versions -->
<td style="border-left: 2px solid black;"> 
  <table style="width:85%; text-align:left; margin-left:15px; line-height: 1.15; ">
  <tr>
    <th style="width:250px">Domain Desc.</th>
    <th style="width:20px">Version</th>
 </tr>
<!--Pinned-Versions-START--><tr id="PinnedDD"><td>shoppingcart-shoppingcart</td><td>1.54.12</td></tr><!--Pinned-Versions-END-->
    
<tr><td></td><td></td></tr>
 <tr>
    <th style="width:250px">Testing Pack.</th>
    <th style="width:20px">Version</th>
 </tr>
<!--Pinned-Versions-START--><tr id="PinnedTP"><td>Test</td><td>x.x.x</td></tr><!--Pinned-Versions-END-->
    

</table>
</td>
</tr>
</table>

<div style="color:black;border:1px solid black;"></div>

【讨论】：