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/

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

Chrome浏览器： 粘性行上的上下边框消失。

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

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

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 2

您需要使用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

Answer 3

一个变通办法可能是个阴影：

测试了当今最新的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 />

粘性thead边框消失

3 个答案: