3、在CSS中，为.grid-table设置display: grid；grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))。

微软出品的免费英文写作/辅助/批改/评分工具

4、为.grid-row设置display: contents，使其不产生盒模型影响。

5、为.grid-cell设置margin: 4px；padding: 8px；border: 1px solid #ccc。

四、应用Bootstrap框架的响应式表格类

该方法借助成熟前端框架内置的响应式工具类，快速实现带滚动容器的表格，适用于已引入Bootstrap的项目。

1、确认页面已加载Bootstrap 4或更高版本的CSS文件。

2、为

3、在外层包裹

4、确保该容器位于标准Bootstrap栅格系统内，例如放在

5、注意：.table-responsive仅在视口宽度小于992px时启用水平滚动，需避免在内部元素上设置white-space: nowrap。

五、使用J*aScript动态切换表格显示模式

该方法根据设备宽度或用户交互行为，动态替换DOM结构，在桌面端保留传统表格，在移动端渲染为卡片列表，兼顾性能与体验。

1、编写函数checkViewportWidth()，获取window.innerWidth值。

2、当宽度小于600px时，调用convertTableToCards()函数遍历所有tr元素。

3、为每个tr生成一个，内部用

4、移除原

5、注意：需监听resize事件并在触发时重新执行检查，但应使用防抖控制调用频率。