html - 在包含具有边框间距的粘性列的表中隐藏滚动内容

Question

我有一个表格，它使用 border-collapse: separate 和 border-spacing 在行和列之间添加间距。我还为前两列使用了 position: sticky，因此当用户水平滚动时，这些列保持卡住状态。

正如您在下面的代码片段中看到的那样，当您水平滚动时，粘性列会保留在原位。但是当您滚动时，您可以在粘性列之间的间隙中看到表格的其他部分。我希望隐藏在这些粘性列后面移动的任何内容。任何帮助将不胜感激。

.table-wrapper {
  width: 250px;
  overflow: scroll;
}

table {
  border-collapse: separate;
  border-spacing: 10px;
}

th {
  background-color: #00aeef;
  border-radius: 5px;
}

table tr td:first-child {
  position: sticky;
  z-index: 2;
  left: 0;
  background-color: white;
}

table tr th:first-child {
  position: sticky;
  z-index: 2;
  left: 0;
  background-color: #00aeef;
}

table tr td:nth-child(2) {
  position: sticky;
  z-index: 2;
  left: 45px;
  background-color: white;
}

table tr th:nth-child(2) {
  position: sticky;
  z-index: 2;
  left: 45px;
  background-color: #00aeef;
}

<div class="table-wrapper">
  <table>
    <thead>
      <tr>
        <th>Col1</th>
        <th>Col2</th>
        <th>Col3</th>
        <th>Col4</th>
        <th>Col5</th>
        <th>Col6</th>
        <th>Col7</th>
        <th>Col8</th>
        <th>Col9</th>
      </tr>
    </thead>
    <tbody>
      <td>Col1</td>
      <td>Col2</td>
      <td>Col3</td>
      <td>Col4</td>
      <td>Col5</td>
      <td>Col6</td>
      <td>Col7</td>
      <td>Col8</td>
      <td>Col9</td>
    </tbody>
  </table>
</div>

更新 我可以通过使用 box-shadow 在某种程度上实现这种效果，但它并不完美。您仍然可以看到与第一列的重叠。

.table-wrapper {
  width: 250px;
  overflow: scroll;
}

table {
  border-collapse: separate;
  border-spacing: 10px;
}

th {
  background-color: #00aeef;
  border-radius: 5px;
}

table tr td:first-child {
  position: sticky;
  z-index: 2;
  left: 0;
  background-color: white;
  box-shadow: 10px 0 white;
}

table tr th:first-child {
  position: sticky;
  z-index: 2;
  left: 0;
  background-color: #00aeef;
  box-shadow: 10px 0 white;
}

table tr td:nth-child(2) {
  position: sticky;
  z-index: 2;
  left: 45px;
  background-color: white;
  box-shadow: -10px 0 white;
}

table tr th:nth-child(2) {
  position: sticky;
  z-index: 2;
  left: 45px;
  background-color: #00aeef;
  box-shadow: -10px 0 white;
}

<div class="table-wrapper">
  <table>
    <thead>
      <tr>
        <th>Col1</th>
        <th>Col2</th>
        <th>Col3</th>
        <th>Col4</th>
        <th>Col5</th>
        <th>Col6</th>
        <th>Col7</th>
        <th>Col8</th>
        <th>Col9</th>
      </tr>
    </thead>
    <tbody>
      <td>Col1</td>
      <td>Col2</td>
      <td>Col3</td>
      <td>Col4</td>
      <td>Col5</td>
      <td>Col6</td>
      <td>Col7</td>
      <td>Col8</td>
      <td>Col9</td>
    </tbody>
  </table>
</div>

Answer 1

您可以使用 JavaScript 实现这一点。

var th = document.querySelectorAll("th");
var td = document.querySelectorAll("td");

var wrapper = document.querySelector(".table-wrapper");

var w1 = th[1].getClientRects()[0].width;

wrapper.addEventListener("scroll", function () {
  for (var i = 0; i < th.length; i++) {
    e = th[i + 1]; //Selecting the next element 
    if (
      e != undefined &&
      i > 0 &&
      th[1].getClientRects()[0].x >= e.getClientRects()[0].x - w1   // Main condition to check if they overlap
    ) {
      e.style.visibility = "hidden";
    } else if (e != undefined) {
      e.style.visibility = "visible";
    }
  }
  for (var i = 0; i < td.length; i++) {
    e = td[i + 1];
    if (
      e != undefined &&
      i > 0 &&
      td[1].getClientRects()[0].x >= e.getClientRects()[0].x - w1
    ) {
      e.style.visibility = "hidden";
    } else if (e != undefined) {
      e.style.visibility = "visible";
    }
  }
});

.table-wrapper {
    width: 250px;
    overflow: scroll;
}

table {
    border-collapse: separate;
    border-spacing: 10px;
}

th {
    background-color: #00aeef;
    border-radius: 5px;
}

table tr td:first-child {
    position: sticky;
    z-index: 2;
    left: 0;
    background-color: white;
}

table tr th:first-child {
    position: sticky;
    z-index: 2;
    left: 0;
    background-color: #00aeef;
}

table tr td:nth-child(2) {
    position: sticky;
    z-index: 2;
    left: 45px;
    background-color: white;
}

table tr th:nth-child(2) {
    position: sticky;
    z-index: 2;
    left: 45px;
    background-color: #00aeef;
}

<link rel="stylesheet" href="style.css">

<body>

    <div class="table-wrapper">
        <table>
            <thead>
                <tr>
                    <th>Col1</th>
                    <th>Col2</th>
                    <th>Col3</th>
                    <th>Col4</th>
                    <th>Col5</th>
                    <th>Col6</th>
                    <th>Col7</th>
                    <th>Col8</th>
                    <th>Col9</th>
                </tr>
            </thead>
            <tbody>
                <td>Col1</td>
                <td>Col2</td>
                <td>Col3</td>
                <td>Col4</td>
                <td>Col5</td>
                <td>Col6</td>
                <td>Col7</td>
                <td>Col8</td>
                <td>Col9</td>
            </tbody>
        </table>
    </div>
    <script src="./script.js"></script>
</body>