Vite项目中React-Bootstrap Table的responsive滚动失效问题

问题分析 #

你的场景中，Table组件的striped/bordered/hover属性正常生效，但responsive属性对应的横向滚动功能失效，核心原因是手动导入Bootstrap SCSS模块时，可能遗漏了响应式表格所需的完整样式依赖，或样式未正确编译生效。React-Bootstrap的responsive属性本质是自动给表格外层添加.table-responsive类，只要该类的CSS样式正确加载，滚动功能就能正常工作。

解决方案 #

方案1：改用完整Bootstrap SCSS导入 #

手动拆分导入模块容易遗漏样式依赖，直接导入完整Bootstrap SCSS可确保所有样式（包括响应式表格）正常生效：
修改styles.scss内容为：

@import "../node_modules/bootstrap/scss/bootstrap";

方案2：手动添加响应式包裹容器 #

如果不想导入完整Bootstrap样式，可手动在Table外层添加带.table-responsive类的容器，替代组件的responsive属性：
修改App.tsx中的代码：

import { Table } from "react-bootstrap";
import "./App.css";
import "./styles.scss";

function App() {
  return (
    <div>
      <span>Connected Devices:</span>
      {/* 手动添加响应式包裹容器 */}
      <div className="table-responsive">
        <Table
          striped
          bordered
          hover
        >
          <thead>
            <tr>
              <th>IP Address</th>
              <th>Protocol</th>
              <th>Duration</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>xxx.xxx.x.xx:xxxxx</td>
              <td> ASCII</td>
              <td>00:00:42</td>
            </tr>
          </tbody>
        </Table>
      </div>
    </div>
  );
}

export default App;

方案3：强制添加自定义CSS修复 #

如果上述方案无效，可直接给.table-responsive类添加强制样式，覆盖可能的冲突：
在App.css中添加：

.table-responsive {
  overflow-x: auto !important;
  width: 100%;
}

额外检查点 #

• 确认没有自定义CSS（如App.css）设置了表格父容器的overflow: hidden，这会覆盖滚动效果
• 检查浏览器开发者工具中的元素样式，确认.table-responsive类是否存在且overflow-x: auto样式已正确应用

内容的提问来源于stack exchange，提问作者Ben H