html - 粘性头部边框消失

Question

使用 html 设置 Excel 样式表时和css带着粘头我发现 table 头上的边框看起来很奇怪。

代码如下:

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: 粘行的上下边框消失。

火狐浏览器: 所有内部边界都消失了。

Safari: 与 Chrome 相同。

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

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