如何在不移动文本的情况下在表格中制作水平滑块？

<div class="table-container">
  <table>
    <!-- 表格内容 -->
  </table>
  <div class="slider"></div>
</div>

.table-container {
  position: relative;
  overflow-x: scroll;
  /* 其他样式设置 */
}

table {
  /* 表格样式设置 */
}

.slider {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10px;
  background: #ccc;
  /* 其他样式设置 */
}

const slider = document.querySelector('.slider');
const tableContainer = document.querySelector('.table-container');

slider.addEventListener('scroll', function(e) {
  const scrollPercentage = slider.scrollLeft / (slider.scrollWidth - slider.clientWidth);
  const tableScrollWidth = tableContainer.scrollWidth - tableContainer.clientWidth;
  const tableScrollLeft = scrollPercentage * tableScrollWidth;
  tableContainer.scrollLeft = tableScrollLeft;
});