Question

我正在尝试创建固定有第一列和第一行的可滚动HTML表。该列已经固定，但是我找不到固定该行的方法。有办法实现吗？

.wrapper {
    margin-left: 5em;
    overflow-x: auto;
    width: 200px;
}

th:first-child, td:first-child {
    left: 0;
    position: absolute;
    width: 5em;
}

th, td p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

td p {
    margin-top: 0;
}

td p:last-child {
    margin-bottom: 0;
}

th, td {
    border-bottom: 1px dashed red;
}

<div class="wrapper">
    <table>
        <thead>
            <tr>
                <th>Column 1 aaa aaa aaa</th>
                <th>Column 2 bbb bbb bbb</th>
                <th>Column 3 ccc ccc ccc</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><p>Column 1 aaa aaa aaa</p></td>
                <td><p>Column 2 bbb bbb bbb</p><p>Column 2 bbb bbb bbb</p></td>
                <td><p>Column 3 ccc ccc ccc</p></td>
            </tr>
            <tr>
                <td><p>Column 1 aaa aaa aaa</p></td>
                <td><p>Column 2 bbb bbb bbb</p></td>
                <td><p>Column 3 ccc ccc ccc</p></td>
            </tr>
            <tr>
                <td><p>Column 1 aaa aaa aaa</p></td>
                <td><p>Column 2 bbb bbb bbb</p></td>
                <td><p>Column 3 ccc ccc ccc</p></td>
            </tr>
            <tr>
                <td><p>Column 1 aaa aaa aaa</p></td>
                <td><p>Column 2 bbb bbb bbb</p></td>
                <td><p>Column 3 ccc ccc ccc</p></td>
            </tr>
            <tr>
                <td><p>Column 1 aaa aaa aaa</p></td>
                <td><p>Column 2 bbb bbb bbb</p></td>
                <td><p>Column 3 ccc ccc ccc</p></td>
            </tr>
        </tbody>
    </table>
</div>

此外（这不是问题的一部分，但是希望获得帮助），我正在尝试固定像元高度。图片说明了一切

Answer 1

遇到问题的主要原因是position: absolute规则，这意味着从文档流中删除了定义更高规则的元素，这导致该列缩小到其内容的大小（在您谈论border的地方并没有放在期望的位置。

position属性还有一个名为sticky的 powerful 值（根据其名称，您猜测它可以做什么！）会在视口滚动到一定位置。

所以不是：

th:first-child, td:first-child {
    left: 0;
    position: absolute;
    width: 5em;
}

使用：

tr th:first-child, tr td:first-child {
  position: sticky;
  left: 0;
  width: 5em;
}

要固定第一行，请在sticky元素上将top: 0与thead > th结合使用：

thead th {
  position: sticky;
  top: 0;
}

下一个演示中的div.wrapper被最小化了（大小），以便我们确保具有垂直/水平滚动。

.wrapper {
  margin-left: 5em;
  overflow-x: auto;
  width: 300px;
  height: 100px; /** for demo purposes to have some scroll **/
}

tr th:first-child,
tr td:first-child {
  position: sticky; /** sticky instead of absolute **/
  left: 0;
  width: 5em;
  background-color: #00f; /** for demo purposes **/
  z-index: 2;  /** so that the column on the left stays on top of the other columns when having an horizontal scroll **/
}

thead th {
  position: sticky; /** pinn forst row **/
  top: 0;
  background-color: #f00; /** for demo purposes **/
}

th,
td p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

td p {
  margin-top: 0;
}

td p:last-child {
  margin-bottom: 0;
}

th,
td {
  border-bottom: 1px dashed red;
}

<div class="wrapper">
  <table>
    <thead>
      <tr>
        <th>Column 1 aaa aaa aaa</th>
        <th>Column 2 bbb bbb bbb</th>
        <th>Column 3 ccc ccc ccc</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <p>Column 1 aaa aaa aaa</p>
        </td>
        <td>
          <p>Column 2 bbb bbb bbb</p>
          <p>Column 2 bbb bbb bbb</p>
        </td>
        <td>
          <p>Column 3 ccc ccc ccc</p>
        </td>
      </tr>
      <tr>
        <td>
          <p>Column 1 aaa aaa aaa</p>
        </td>
        <td>
          <p>Column 2 bbb bbb bbb</p>
        </td>
        <td>
          <p>Column 3 ccc ccc ccc</p>
        </td>
      </tr>
      <tr>
        <td>
          <p>Column 1 aaa aaa aaa</p>
        </td>
        <td>
          <p>Column 2 bbb bbb bbb</p>
        </td>
        <td>
          <p>Column 3 ccc ccc ccc</p>
        </td>
      </tr>
      <tr>
        <td>
          <p>Column 1 aaa aaa aaa</p>
        </td>
        <td>
          <p>Column 2 bbb bbb bbb</p>
        </td>
        <td>
          <p>Column 3 ccc ccc ccc</p>
        </td>
      </tr>
      <tr>
        <td>
          <p>Column 1 aaa aaa aaa</p>
        </td>
        <td>
          <p>Column 2 bbb bbb bbb</p>
        </td>
        <td>
          <p>Column 3 ccc ccc ccc</p>
        </td>
      </tr>
      <tr>
        <td>
          <p>Column 1 aaa aaa aaa</p>
        </td>
        <td>
          <p>Column 2 bbb bbb bbb</p>
        </td>
        <td>
          <p>Column 3 ccc ccc ccc</p>
        </td>
      </tr>
      <tr>
        <td>
          <p>Column 1 aaa aaa aaa</p>
        </td>
        <td>
          <p>Column 2 bbb bbb bbb</p>
        </td>
        <td>
          <p>Column 3 ccc ccc ccc</p>
        </td>
      </tr>
      <tr>
        <td>
          <p>Column 1 aaa aaa aaa</p>
        </td>
        <td>
          <p>Column 2 bbb bbb bbb</p>
        </td>
        <td>
          <p>Column 3 ccc ccc ccc</p>
        </td>
      </tr>
    </tbody>
  </table>
</div>

详细了解position规则。

第一列和第一行固定的可滚动表

1 个答案: