使用CSS设置table宽度为100%，禁止固定列宽，使表格随容器自适应缩放，解决移动端列多溢出问题。
在移动端设备上，传统HTML表格常因列数多或内容宽导致溢出、横向滚动困难或显示错乱。要让HTML表格具备响应式布局能力，需结合CSS和HTML结构优化，确保在小屏幕上也能良好展示。以下是几种实用的响应式表格实现方法。
使用CSS控制表格自适应宽度
通过设置表格宽度为100%，并禁止固定列宽，可以让表格随容器缩放。
关键点：- 将 table 设置为 width: 100%，确保填满父容器
- table-layout: fixed 均匀分配列宽
- 对单元格使用 word-wrap: break-word 防止长文本溢出
示例代码：
隐藏部分列（适用于非核心数据）
在屏幕较小时，可选择性隐藏不重要的列，保留关键信息。
立即学习“前端免费学习笔记（深入）”；
- 为非必要列添加类名如 .hide-on-mobile
- 使用媒体查询在小屏下设置 display: none
CSS 示例：
@media (max-width: 768px) {
.hide-on-mobile {
display: none;
}
}
适合报表类表格中“操作”“编号”等辅助列的隐藏。
转换为卡片式布局（推荐移动端）
当列数较多时，将每行数据转为独立卡片，提升可读性。
- 每个 tr 改造成一个 div.card
- 每对 th:td 显示为“字段名：值”的组合
- 配合媒体查询切换布局模式
示例结构：
姓名: 张三
邮箱: zhang@example.com
搭配CSS在移动端显示为堆叠卡片，桌面端仍用表格。
添加横向滚动容器
若必须保留所有列，可用外层容器包裹表格并允许横向滑动。
- 用 div 包裹 table
- 设置容器 overflow-x: auto
代码示例：
姓名 年龄 地址 电话 张三 25 北京市... 138...
用户可通过左右滑动查看完整内容，简单有效。
基本上就这些常用方法。根据实际场景选择：列少可用自适应+换行，列多建议卡片或滚动容器。关键是保证内容可读、操作便捷。不复杂但容易忽略细节。
