antd table横向滚动条样式自定义

### 自定义 Ant Design Table 组件的横向滚动条样式

为了自定义 Ant Design Table 组件中的横向滚动条样式，可以通过 CSS 或者更具体的 ::webkit-scrollbar 伪类来实现这一目标。对于不同浏览器的支持情况有所不同，因此建议采用兼容性较好的方法[^1]。

下面是一个简单的例子展示如何通过 CSS 来修改表格内部滚动条的外观：

/* 定义滚动条轨道 */
.ant-table-body::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

/* 定义滑块 */
.ant-table-body::-webkit-scrollbar-thumb {
    background-color: darkgrey;
    outline: none;
    border-radius: 10px;
}

/* 当鼠标悬停于滑块上时改变颜色 */
.ant-table-body::-webkit-scrollbar-thumb:hover {
    background-color: grey;
}

如果希望进一步控制滚动行为或应用更多定制化效果，则可以考虑包裹一层 div 并设置 overflow 属性以及 max-width/max-height 等属性，再利用 JavaScript 动态调整这些容器尺寸以达到预期的效果[^2]。

另外需要注意的是，在某些情况下可能还需要处理好与父级元素之间的关系，确保不会因为设置了固定高度或其他因素影响到实际显示效果。

最后提醒一点，上述方式适用于 Webkit 浏览器内核（如 Chrome 和 Safari），其他非 webkit 内核下的浏览器可能会有不同的表现形式，所以最好测试多平台下的一致性和可用性。