在网页开发过程中，不少开发者习惯使用table元素来实现页面布局，这种方式在固定宽度的PC端页面中往往能正常工作，但切换到手机端时，经常会出现表格内容溢出屏幕、列宽被挤压变形、整体布局错乱等问题，导致用户体验大幅下降。
table布局在手机端失效的核心原因
1. table的默认渲染规则不兼容小屏幕
table元素默认的table-layout属性值为auto，浏览器会根据单元格内的内容自动计算列宽，当内容宽度超过手机屏幕宽度时，table不会主动缩放，而是会出现横向滚动条或者内容溢出屏幕外。如果给table设置了固定宽度，比如width: 1200px，在手机端小屏幕上这个宽度远超过视口宽度，就会导致整个表格被强制拉伸或者显示不全。
2. 移动端视口未正确设置
很多使用table布局的老旧页面没有配置移动端适配的视口标签，手机浏览器会默认以980px的宽度渲染页面，然后再缩放适配屏幕，这会导致table布局被整体缩小，文字和元素变得非常小，用户需要手动放大才能看清内容，看起来就像布局失效了。
3. 单元格内容未做适配处理
table内部的<td>、<th>元素如果包含固定宽度的图片、长文本或者未设置换行的代码内容，在手机端小屏幕上这些内容无法自动折行，就会把单元格撑开，进而破坏整个table的结构，导致列重叠或者错位。
如何解决table布局的移动端适配问题
1. 配置正确的视口标签
首先在页面的<head>部分添加移动端适配的视口标签，让浏览器按照设备的实际宽度渲染页面，避免默认的缩放行为：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
2. 调整table的布局属性
将table的table-layout设置为fixed，同时设置宽度为100%，让表格宽度跟随父容器变化，再给单元格设置合适的宽度占比，避免内容撑开布局：
/* 表格基础样式 */
.responsive-table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
/* 单元格样式，设置文本自动换行 */
.responsive-table td, .responsive-table th {
word-wrap: break-word;
padding: 8px;
border: 1px solid #ddd;
}
<table class="responsive-table">
<thead>
<tr>
<th style="width: 30%;">姓名</th>
<th style="width: 70%;">简介</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>这是一段较长的文本内容，在移动端会自动换行不会撑开单元格</td>
</tr>
</tbody>
</table>
3. 使用媒体查询优化小屏幕显示
当屏幕宽度小于768px时，可以将表格转为卡片式布局，避免表格列过多导致挤压：
/* 小屏幕下表格转为块级元素显示 */
@media screen and (max-width: 768px) {
.responsive-table {
display: block;
}
.responsive-table thead {
display: none;
}
.responsive-table tbody, .responsive-table tr, .responsive-table td {
display: block;
width: 100%;
}
.responsive-table td {
border-bottom: none;
position: relative;
padding-left: 40%;
}
.responsive-table td:before {
content: attr(data-label);
position: absolute;
left: 8px;
width: 35%;
font-weight: bold;
}
}
<table class="responsive-table">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="姓名">李四</td>
<td data-label="年龄">25</td>
<td data-label="城市">北京</td>
</tr>
</tbody>
</table>
布局方式的选择建议
虽然通过上述方法可以修复table布局的移动端问题，但table本身的设计初衷是展示结构化数据，并不适合作为页面布局工具。如果是实现页面整体结构或者复杂的响应式布局，更推荐使用flex布局或者grid布局，这两种布局原生支持响应式规则，适配移动端更加方便，也能减少很多兼容性问题。只有在需要展示行列规整的数据内容时，才优先选择table元素，同时做好对应的移动端适配处理。