UPDATE 2023-05-04

某些情况下，css 属性inset 不被支持，造成本文介绍的方法失效。此时只要用 left、top 加上宽高替换 inset 就好了。下面的代码已经修改。

---

Element Plus 的 Table 组件文档写道：

只要在 el-table 元素中定义了 height 属性，即可实现固定表头的表格，而不需要额外的代码。

可是有几个场景能知道 Table 的固定高度？所以文档中的方法不太可行。

尝试使用 :deep() 深度选择器改变 el-table 的样式，使它形成 overflow-y: auto 的区域，就会触发一个非常奇怪的行为：el-table 的宽度会一直慢慢变大！因为看起来是脚本控制的，也就没有精力深究。

最后还是在 CSDN 上找到的办法，使用绝对定位。我的实践，下面的代码是最方便的：

HTML:

<div class="box">
    <div class="menu">菜单之类的顶部区域，不需要可以去掉</div>
    <div class="table-box">
        <el-table class="el-table"></el-table>
    </div>
</div>

CSS:

.box {
    display: flex;
    flex-direction: column;
}

.menu {
    flex: none;
    height: 100px;
}

.table-box {
    flex: auto;
    overflow: hidden;
    position: relative;
}

.el-table {
    position: absolute;
    - inset: 0;
    + left: 0;
    + top: 0;
    + width: 100%;
    + height: 100%;
}

现在，el-table 就会在固定表头的同时，使用内置的 el-scrollbar 来滚动表格内容了。

End