Element UI el-table 横向滚动条固定底部 - 完整 CSS 实现

要将 el-table 的横向滚动条固定在可视区域底部，可以使用 CSS 的 position 属性来实现。

首先，将 el-table 的外层容器设置为相对定位 (position: relative)：

<div style="position: relative;">
  <el-table :data="tableData" style="width: 100%;">
    <!-- el-table 的内容 -->
  </el-table>
</div>

然后，将 el-table 的横向滚动条的样式设置为绝对定位 (position: absolute)，并且设置 bottom 属性为 0：

<style>
  .el-table__body-wrapper::-webkit-scrollbar {
    height: 8px;
  }

  .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 4px;
  }

  .el-table__body-wrapper::-webkit-scrollbar-track {
    background-color: #f5f5f5;
    border-radius: 4px;
  }

  .el-table__body-wrapper {
    position: relative;
    overflow-x: auto;
  }

  .el-table__body-wrapper .el-table__body {
    position: relative;
  }

  .el-table__body-wrapper .el-table__body::-webkit-scrollbar {
    height: 8px;
  }

  .el-table__body-wrapper .el-table__body::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 4px;
  }

  .el-table__body-wrapper .el-table__body::-webkit-scrollbar-track {
    background-color: #f5f5f5;
    border-radius: 4px;
  }

  .el-table__fixed-right {
    position: absolute;
    bottom: 0;
  }
</style>

这样，el-table 的横向滚动条就会固定在可视区域底部了。