如何在滚动时保留 HTML 表格中固定列的右边框？

Question

沙箱：https://codepen.io/test41564/pen/mdzaRrV

.tableFixHead table {
  border-collapse: collapse;
  width: 100%;
}

.tableFixHead th,
.tableFixHead td {
  padding: 8px 16px;
}

td:first-child,
th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: white;
}

td:nth-child(2),
th:nth-child(2) {
  position: sticky;
  left: 40px;
  z-index: 1;
  background-color: white;
  border-right: 1px solid black;
}

.tableFixHead th {
  position: sticky;
  top: 0;
  background: #eee;
  z-index: 2
}

th:first-child,
th:nth-child(2) {
  z-index: 3
}

<div class="tableFixHead">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>#</th>
        <th>Name</th>
        <th>01-11</th>
        <th>02-11</th>
        <th>03-11</th>
        <th>04-11</th>
        <th>05-11</th>
        <th>06-11</th>
        </th>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Jack</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Michel</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Amanda</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Amanda</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
      </tr>
    </tbody>
  </table>
</div>

我尝试了一些技巧，例如尝试设置：

td:nth-child(2),
th:nth-child(2) { 
  position: sticky;
  border-right: 1px solid black;
}

但是滚动时这不会被保留。我尝试使用像

::before

这样的伪元素，我认为这是做到这一点的关键，但我无法弄清楚这一点。我什至向 AI 寻求帮助，但没有，所以现在我正在尝试 stackoverflow，如果这里的其他人知道这是否可能的话。

Answer 1

那是因为

border-collapse: collapse;

。

th

和

td

与他们的兄弟姐妹共享边界。

尝试

border-collapse: separate;

。

.tableFixHead table {
  border-collapse: separate;
  width: 100%;
}

.tableFixHead th,
.tableFixHead td {
  padding: 8px 16px;
}

td:first-child,
th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: white;
}

td:nth-child(2),
th:nth-child(2) {
  position: sticky;
  left: 40px;
  z-index: 1;
  background-color: white;
  border-right: 1px solid black;
}

.tableFixHead th {
  position: sticky;
  top: 0;
  background: #eee;
  z-index: 2
}

th:first-child,
th:nth-child(2) {
  z-index: 3
}

<div class="tableFixHead">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>#</th>
        <th>Name</th>
        <th>01-11</th>
        <th>02-11</th>
        <th>03-11</th>
        <th>04-11</th>
        <th>05-11</th>
        <th>06-11</th>
        </th>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Jack</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Michel</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Amanda</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Amanda</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 2

我发现使用像

inset -1px 0 #ccc

这样的盒子阴影来模拟右边框可以很好地处理固定列，并使它们完全可滚动。

对我来说，保留

table

的默认值

border-collapse: collapse;

非常重要......