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

Question

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

直播：https://jsfiddle.net/8dnzgtwa/

.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（从它的名字你猜它可以做什么！）当视口滚动到某个位置时，它会固定在它的位置。

所以不是：

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;
}

对于要固定的第一行，在 thead > th 元素上使用 sticky 和 top: 0：

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 规则。