如何在具有边框折叠的表格中避免边框折叠：折叠？

Question

我正在制作一个表格，我希望第一列和最后一列是粘性的。这部分我已经处理好了（我使容器可调整大小，这样您就可以让滚动条看到它。）

我的问题是我希望粘性列分别具有右边框和左边框。当表格尚未滚动时，您可以看到边框完全按照我想要的方式工作。但是，当您开始滚动时，边框会因无法解释的原因而消失。然而，当我关闭表格的

border-collapse: collapse

时，此错误就会消失，但是，我需要

border-collapse: collapse

才能使表格设计的其余部分正确。因此，我想知道，有没有一种方法可以使表格内的特定边框逃脱表格边框折叠行为，这似乎将其搞乱了？请帮我解决这个问题。

我尝试用盒子阴影替换边框，但是，完全相同的问题仍然发生。

我也尝试过使用 ::before 和 ::after 伪元素，但是，如果您从我的代码片段中评论该解决方案，您会发现它不起作用，并且我无法使边框正确对齐.

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

section {
  background-color: white;
  border-radius: 1rem;
  padding: 1rem;
  margin: 0 auto;
  overflow: hidden;
  resize: horizontal;
}

button {
  cursor: pointer;
  padding: 0.25rem 0.5rem;
}

.wl-table-container {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
}

.wl-table {
  --wlt-background: white;
  --wlt-column-gap: 3rem;
  --wlt-border-width: 0.0625rem;
  --wlt-border-style: solid;
  --wlt-border-color: #ccc;
  --wlt-border: var(--wlt-border-width) var(--wlt-border-style) var(--wlt-border-color);
  font-size: 0.875rem;
  border-collapse: collapse;
  width: 100%;
}

.wl-table th,
.wl-table td {
  padding-block: 0.5rem;
  border-bottom: var(--wlt-border);
  white-space: nowrap;
  text-align: left;
}

.wl-table th+th,
.wl-table td+td {
  padding-left: var(--wlt-column-gap);
}

.wl-table th[data-type="stretch"],
.wl-table td[data-type="stretch"] {
  width: 100%;
}

.wl-table th[data-type="sticky-start"],
.wl-table td[data-type="sticky-start"] {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--wlt-background);
  padding-right: 1rem;
  border-right: var(--wlt-border);
}


/*.wl-table th[data-type="sticky-start"]::after,
.wl-table td[data-type="sticky-start"]::after {
    content: "";
    position: absolute;
    top: 0;
    right: calc(0 - var(--wlt-border-width) + 1rem);
    bottom: 0;
    width: var(--wlt-border-width); 
    background: var(--wlt-border-color);
    z-index: 1;
}*/

.wl-table th[data-type="sticky-end"],
.wl-table td[data-type="sticky-end"] {
  position: sticky;
  right: 0;
  z-index: 1;
  background: var(--wlt-background);
  padding-left: 1rem;
  border-left: var(--wlt-border);
}


/*.wl-table th[data-type="sticky-end"]::after,
.wl-table td[data-type="sticky-end"]::after {
    content: "";
    position: absolute;
    top: 0;
    left: calc(0 - var(--wlt-border-width) - 1rem);
    bottom: 0;
    width: var(--wlt-border-width); 
    background: var(--wlt-border-color);
    z-index: 1;
}*/

<section>

  <div class="wl-table-container">
    <table class="wl-table">
      <thead>
        <tr>
          <th scope="col">Order</th>
          <th scope="col">Total</th>
          <th scope="col">Date</th>
          <th scope="col" data-type="stretch">Customer</th>
          <th scope="col"></th>
        </tr>
      </thead>

      <tbody>
        <tr tabindex="0">
          <td data-type="sticky-start">#100000000023</td>
          <td>$199.99</td>
          <td>12:38 - 21. Jan. 2024</td>
          <td data-type="stretch">Peter Pan</td>
          <td data-type="sticky-end"><button>:</button></td>
        </tr>
        <tr tabindex="0">
          <td data-type="sticky-start">#100000000024</td>
          <td>$199.99</td>
          <td>12:38 - 21. Jan. 2024</td>
          <td data-type="stretch">Peter Griffin</td>
          <td data-type="sticky-end"><button>:</button></td>
        </tr>
        <tr tabindex="0">
          <td data-type="sticky-start">#100000000025</td>
          <td>$199.99</td>
          <td>12:38 - 21. Jan. 2024</td>
          <td data-type="stretch">Peter Bealish</td>
          <td data-type="sticky-end"><button>:</button></td>
        </tr>
        <tr tabindex="0">
          <td data-type="sticky-start">#100000000026</td>
          <td>$199.99</td>
          <td>12:38 - 21. Jan. 2024</td>
          <td data-type="stretch">Peter Parker</td>
          <td data-type="sticky-end"><button>:</button></td>
        </tr>
      </tbody>
    </table>
  </div>
</section>

Answer 1

试试这个：

.wl-table th[data-type="sticky-start"],
.wl-table td[data-type="sticky-start"] {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--wlt-background);
    padding-right: 1rem;
}

.wl-table th[data-type="sticky-start"]::before,
.wl-table td[data-type="sticky-start"]::before {
    content: "";
    position: absolute;
    top: 0;
    right: -1px; /* Adjust this value as needed */
    bottom: 0;
    width: var(--wlt-border-width); 
    background: var(--wlt-border-color);
    z-index: 1;
}

.wl-table th[data-type="sticky-end"],
.wl-table td[data-type="sticky-end"] {
    position: sticky;
    right: 0;
    z-index: 1;
    background: var(--wlt-background);
    padding-left: 1rem;
}

.wl-table th[data-type="sticky-end"]::after,
.wl-table td[data-type="sticky-end"]::after {
    content: "";
    position: absolute;
    top: 0;
    left: -1px; /* Adjust this value as needed */
    bottom: 0;
    width: var(--wlt-border-width); 
    background: var(--wlt-border-color);
    z-index: 1;
}