粘性标题边框消失[重复]

Question

在使用带有粘性头部的html 和css 设置excel 样式表时，我意识到表格头部的边框看起来很奇怪。

代码如下：

table {
  border-collapse: collapse;
  position: relative;
}

tr:nth-child(even) {
  background-color: lightgray;
}

th {
  background-color: lightblue;
  position: sticky;
  top: 0;
}

th,
td {
  border: 1px solid black;
  padding: 10px 20px;
}

<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1</td>
      <td>Row 1</td>
    </tr>
    <tr>
      <td>Row 2</td>
      <td>Row 2</td>
    </tr>
  </tbody>
</table>

JSFiddle：https://jsfiddle.net/cpotdevin/5j3ah247/

下图显示了它在三种不同浏览器中的外观。

铬： 粘性行的上下边界消失。

火狐： 所有内部边界都消失了。

Safari： 与铬相同。

我也尝试不使用border-collapse: collapse;，而是使用table 上的cellspacing=0 属性，但这会使内部边框看起来比我想要的要厚。

JSFiddle：https://jsfiddle.net/cpotdevin/wxvn1crL/

我能做些什么来解决这个问题？我希望边框看起来总是像表头没有进入粘性状态时一样。

编辑

正如@JonMac1374 所指出的，这个问题已经在here 得到回答。

This was my implementation of that solution.

Answer 1

解决方法可能是一个阴影：

测试宽度今天最新的 Chrome & Firefox

https://jsfiddle.net/4npw6q5j/ 或下面的演示，您可以查看、评论并查看是否可以替代您。

table {
  position: relative;
}

tr:nth-child(even) {
  background-color: lightgray;
}

th {
  background-color: lightblue;
  position: sticky;
  top: 0;box-shadow:0 1px
}

th,
td {
  border: 1px solid black;
  padding: 10px 20px;
}

<table cellspacing=0>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1</td>
      <td>Row 1</td>
      <td>Row 1</td>
      <td>Row 1</td>
    </tr>
    <tr>
      <td>Row 2</td>
      <td>Row 2</td>
      <td>Row 2</td>
      <td>Row 2</td>
    </tr>
    <tr>
      <td>Row 3</td>
      <td>Row 3</td>
      <td>Row 3</td>
      <td>Row 3</td>
    </tr>
    <tr>
      <td>Row 4</td>
      <td>Row 4</td>
      <td>Row 4</td>
      <td>Row 4</td>
    </tr>
    <tr>
      <td>Row 5</td>
      <td>Row 5</td>
      <td>Row 5</td>
      <td>Row 5</td>
    </tr>
    <tr>
      <td>Row 6</td>
      <td>Row 6</td>
      <td>Row 6</td>
      <td>Row 6</td>
    </tr>
    <tr>
      <td>Row 7</td>
      <td>Row 7</td>
      <td>Row 7</td>
      <td>Row 7</td>
    </tr>
  </tbody>
</table>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

Answer 2

border-collapse: collapse 将删除重叠边框之一。如果实在不喜欢粗边框效果，可以创建2张表格，一张给<thead>，一张给tbody，并设置td{border-top: 0px !important;}：

tr:nth-child(even) {
  background-color: lightgray;
}
table{
  border-collapse: collapse;
}
.title {
  background-color: lightblue;
  position: sticky;
  top: 0;

}

th,
td {
  border: 1px solid black;
  padding: 10px 20px;
}
td{
  border-top: 0px !important;
}

<table cellspacing="0" width="500" class="title">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
</table>
<table cellspacing="0" width="500">
  <tbody>
    <tr>
      <td>Row 1</td>
      <td>Row 1</td>
    </tr>
    <tr>
      <td>Row 2</td>
      <td>Row 2</td>
    </tr>
  </tbody>
</table>

结果：

Answer 3

您需要使用border-collapse: 分隔并只设置底部和左侧边框。

表格的边缘可以有针对性地填补缺失的边框，如下：

table {
  position: relative;
  border-collapse: separate;
}

tr:nth-child(even) {
  background-color: lightgray;
}

th {
  background-color: lightblue;
  position: sticky;
  top: 0;
}

th, td{
  border-color:black;
  border-style:solid;
  border-width:0 0 1px 1px;
  padding: 10px 20px;
}

th{
  border-top-width:1px;
}

th:last-child, td:last-child
{
  border-right-width:1px;
}

tr:last-child td{
  border-bottom-width:1px;
}

JSFiddle