粘性头部边框消失

Question

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

这是代码：

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/

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

Chrome： 粘行上的上下边框消失。

Firefox： 所有内部边框都会消失。

Safari： 与 Chrome 中相同。

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

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

我能做什么来解决这个问题？我希望边框始终看起来像表头未进入粘性状态时的样子。

编辑

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

这是我对该解决方案的实施。

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 />