HTML 表格 - 带右边框的粘性列

Question

我需要创建一个带有粘性第一列的 HTML 表格，这是最简单的部分。棘手的部分是，粘性列应该有一个右边框，只有当我们开始水平滚动时才可见。我需要在我的角度应用程序中实现这个。

我将第一列设为粘性，但无法弄清楚如何仅在我们开始滚动时添加右边框。

<div class="table">
  <table>
    <thead>
      <tr>
        <th class="sticky-column col">DATA1</th>
        <th class="col">DATA2</th>
        <th class="col">DATA3</th>
        <th class="col">DATA4</th>
      </tr>
    </thead>
    <tbody>
      <tr class="row">
        <td class="sticky-column data">Some values</td>
        <td class="data">Some values</td>
        <td class="data">Some values</td>
        <td class="data">Some values</td>
      </tr>
      <tr class="row">
        <td class="sticky-column data">Some values</td>
        <td class="data">Some values</td>
        <td class="data">Some values</td>
        <td class="data">Some values</td>
      </tr>
      <tr class="row">
        <td class="sticky-column data">Some values</td>
        <td class="data">Some values</td>
        <td class="data">Some values</td>
        <td class="data">Some values</td>
      </tr>
      <tr class="row">
        <td class="sticky-column data">Some values</td>
        <td class="data">Some values</td>
        <td class="data">Some values</td>
        <td class="data">Some values</td>
      </tr>
    </tbody>
  </table>
</div>

// ***** Table ***** //
.table {
  overflow-x: auto;
  h1 {
    grid-area: h;
  }
  table {
    border-collapse: collapse;
    td, th {
      background-color: #ffffff;
    }
  }
  .sort-table {
    width: 100%;
    tbody {
      border-top: 1px solid $primary-blue;
      border-bottom: 1px solid $primary-blue;
      tr + tr td {
        border-top: 1px solid $greyscale-light-grey;
      }
      td {
        padding-left: 10px !important;
        white-space: nowrap;
      }
    }
    .col {
      &:focus  {
        box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px $primary-blue;
      }
      padding: 20px 65px 20px 5px;
    }

    .row {
      padding: 20px;
      .data {
        padding: 20px;
        color: $primary-dark-blue;
      }
      &:hover {
        background-color: $primary-light-blue;
        .data {
          background-color: $primary-light-blue;
        }
      }
    }

    .sticky-column {
      position: sticky;
      left: 0;
      z-index: 2;
      border-right: 1px solid $primary-light-blue;
    }
  }
}

.hidden{
  visibility: hidden;
}

// ***** End of table ***** //

Answer 1

如果我正确理解了问题，您可以检测滚动事件（浏览器的滚动器甚至特定元素的滚动器）并应用一些逻辑来打开和关闭标志（例如，borderVisible）并将该标志绑定到您的html，其中您可以应用一些 ngStyle 来做动态样式。这能回答你的问题吗？