td 粘性隐形边框 - 如何修复答案

【问题标题】：td sticky invisible border - how to fixtd 粘性隐形边框 - 如何修复
【发布时间】：2021-03-26 16:47:35
【问题描述】：

我有以sticky <td> 为标题的表格。表的<tr> 和<thead> 不能粘=(

问题是当标题变粘时，边框变得不可见。它显示为填充。

table{
  border-collapse:collapse;
}
td{
border:3px solid gray;
padding:3px;
}

tbody td{
  background:lightgreen;
}
.sticky{
  background:maroon;
  color:white;
  position:sticky;
  top:0;
}

<table>
  <thead>
    <tr>
      <td class="sticky">This is sticky header
      <td class="sticky">This is sticky header
      <td class="sticky">This is sticky header
      <td class="sticky">This is sticky header
   <tbody>
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
</table>

【问题讨论】：

标签： html css

【解决方案1】：

好的，我做了一些研究，发现了这个 :
border-spacing: 0; *border-collapse: collapse; 并且成功了。

table{
  border-spacing: 0; *border-collapse: collapse;
}
td{
border:3px solid gray;
padding:3px;
}

tbody td{
  background:lightgreen;
}
.sticky{
  background:maroon;
  color:white;
  position:sticky;
  top:0;
}

<table>
  <thead>
    <tr>
      <td class="sticky">This is sticky header</td>
      <td class="sticky">This is sticky header</td>
      <td class="sticky">This is sticky header</td>
      <td class="sticky">This is sticky header</td>
    </tr>
   <tbody>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
</table>

【讨论】：

好的，这部分修复了问题，但会导致双边框。 1px 变成 2px，2px 变成 4px。因为边界不会崩溃。不过，我可以尝试设置不是所有的边框来修复它。

【解决方案2】：

将border-collapse: separate; 添加到表中，它将解决您的问题。它将使您的边框位于<td> 上，边框将真正连接到<td>，并出现collapsed。

更新：还将border-spacing: 0; 添加到表格中，以便表格单元格没有任何填充。

table{
  border-collapse: separate;
  border-spacing: 0;
}
td{
border:3px solid gray;
padding:3px;
}

tbody td{
  background:lightgreen;
}
.sticky{
  background:maroon;
  color:white;
  position:sticky;
  top:0;
}

<table>
  <thead>
    <tr>
      <td class="sticky">This is sticky header
      <td class="sticky">This is sticky header
      <td class="sticky">This is sticky header
      <td class="sticky">This is sticky header
   <tbody>
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
</table>

【讨论】：

但是我不需要单元格之间的空白=\我需要我提到的那个设计。
更新的帖子，是你要找的吗？
几乎，但没有“双”边框。这可以通过将边框设置到单元格的一侧来解决。