table横向滚动条 始终在可是范围内

要实现表格横向滚动条始终在可视范围内的效果，可以使用 CSS 的 position 和 z-index 属性。

具体实现步骤如下：

1. 首先，在表格容器外面包裹一个 div 容器，并设置该容器的宽度和 overflow-x 属性，如下所示：

<div style="width: 100%; overflow-x: auto; position: relative;">
  <Table :columns="columns" :data="data" style="width: 100%;" />
  <div class="scrollbar-horizontal" style="position: absolute; bottom: 0; left: 0; z-index: 1;"></div>
</div>

2. 在外部容器中添加一个绝对定位的 div，用于显示横向滚动条。将该 div 的 position 属性设置为 absolute，bottom 属性设置为 0，left 属性设置为 0，可以使滚动条始终位于表格容器的底部，并且距离容器左侧为 0。

3. 通过设置 z-index 属性，将滚动条的 z-index 值设置为 1，这样可以确保滚动条始终显示在表格之上。

4. 最后，添加样式来自定义滚动条的外观和样式，例如：

.scrollbar-horizontal {
  height: 10px;
  background-color: #ccc;
  border-radius: 5px;
  width: 100%;
}

通过这样的设置，当表格的内容超出容器宽度时，横向滚动条会出现在外部容器中，并且始终位于表格容器的底部，保证了用户在滚动表格时，始终可以看到横向滚动条。