嘿，我来帮你解决这个表格滚动条的问题！先说说你之前的CSS为啥没生效：

1. 你第一个用了#mytable::-webkit-scrollbar，但你的表格ID是rip啊，选择器都不对，而且表格本身默认不会产生滚动条——滚动条大概率来自包裹表格的父容器，或者是表格的tbody区域；
2. 第二个给.table.table-bordered.table-striped加overflow:hidden也没用，因为这些类是给表格本身用的，表格默认是块级元素，不会触发溢出滚动，所以这个设置根本起不到作用。

接下来给你两种针对性的解决方案，你根据自己的情况选：

情况1：滚动条来自表格的父容器 #

如果你的表格是被一个div之类的容器包裹着，滚动条是这个容器产生的，那你需要先给表格套个容器（如果还没套的话），然后给容器加隐藏滚动条的样式：

<!-- 先给表格套个容器 -->
<div class="table-container">
  <table id="rip" class="table table-bordered table-striped js-dataTable-full-pagination">
    <!-- 你的表格内容 -->
  </table>
</div>

然后写CSS：

/* 设置容器的最大高度，触发滚动 */
.table-container {
  max-height: 500px; /* 改成你需要的高度 */
  overflow-y: auto;
}

/* 隐藏滚动条，兼容多浏览器 */
.table-container::-webkit-scrollbar {
  display: none; /* Chrome、Safari */
}
.table-container {
  -ms-overflow-style: none; /* IE、Edge */
  scrollbar-width: none; /* Firefox */
}

情况2：滚动条来自表格的tbody（想固定thead，滚动tbody） #

如果是想让表头固定，只有tbody滚动，那需要调整表格的布局样式：

/* 把表格改成块级元素，确保优先级覆盖Bootstrap默认样式 */
#rip.table.table-bordered.table-striped {
  display: block;
  width: 100%;
}

/* 把thead和tbody分开成块级 */
#rip thead, #rip tbody {
  display: block;
}

/* 设置tbody的最大高度，触发滚动 */
#rip tbody {
  max-height: 500px; /* 自定义高度 */
  overflow-y: auto;
  overflow-x: hidden;
}

/* 隐藏tbody的滚动条 */
#rip tbody::-webkit-scrollbar {
  display: none;
}
#rip tbody {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* 给每列设置固定宽度，避免表头和内容错位 */
#rip th, #rip td {
  width: 20%; /* 根据你的列数调整，比如5列就设20%，列宽不同可单独设置 */
}

额外注意事项 #

• 用浏览器的开发者工具（按F12）检查一下，到底是哪个元素产生了滚动条——找到那个带有overflow-y: auto的元素，直接针对它加隐藏滚动条的样式最准确；
• 因为你用了Bootstrap3的默认表格样式，自定义样式要确保优先级足够，比如用#rip.table.table-bordered这种组合选择器，避免被默认样式覆盖。

内容的提问来源于stack exchange，提问作者Sager Qays