下面的代码是如何实现将表格在手机屏幕上滚动的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>滚动表格中的列</title>
<style>
@media only screen and (max-width: 800px) {
*:first-child+html .cf { zoom: 1; }
table { width: 100%; border-collapse: collapse; border-spacing: 0; }
th,
td { margin: 0; vertical-align: top; }
th { text-align: left; }
table { display: block; position: relative; width: 100%; }
thead { display: block; float: left; }
tbody { display: block; width: auto; position: relative; overflow-x: auto; white-space: nowrap; }
thead tr { display: block; }
th { display: block; text-align: right; }
tbody tr { display: inline-block; vertical-align: top; }
td { display: block; min-height: 1.25em; text-align: left; }
th { border-bottom: 0; border-left: 0; }
td { border-left: 0; border-right: 0; border-bottom: 0; }
tbody tr { border-left: 1px solid #babcbf; }
th:last-child,
td:last-child { border-bottom: 1px solid #babcbf; }
}
</style>
</head>
<body style="background-image: url(bg.png)">
<h1 align="center">招聘信息</h1>
<table width="100%" cellspacing="1" cellpadding="5" border="1">
<thead>
<tr>
<th>序号</th>
<th>职位名称</th>
<th>招聘人数</th>
<th>工作地点</th>
<th>学历要求</th>
<th>年龄要求</th>
<th>薪资</th>
</tr>
</thead>
<tbody align="center">
<tr>
<td>1</td>
<td>Java高级工程师</td>
<td>1</td>
<td>北京</td>
<td>本科</td>
<td>30岁以上</td>
<td>面议</td>
</tr>
<tr>
<td>2</td>
<td>Java初级工程师</td>
<td>3</td>
<td>长春</td>
<td>本科</td>
<td>25岁以上</td>
<td>面议</td>
</tr>
<tr>
<td>3</td>
<td>前端UI设计师</td>
<td>2</td>
<td>长春</td>
<td>本科</td>
<td>25岁以上</td>
<td>面议</td>
</tr>
<tr>
<td>4</td>
<td>PHP高级工程师</td>
<td>2</td>
<td>北京</td>
<td>本科</td>
<td>30岁以上</td>
<td>面议</td>
</tr>
<tr>
<td>5</td>
<td>产品经理</td>
<td>1</td>
<td>长春</td>
<td>本科</td>
<td>28岁以上</td>
<td>面议</td>
</tr>
<tr>
<td>6</td>
<td>测试工程师</td>
<td>3</td>
<td>北京</td>
<td>本科</td>
<td>28岁以上</td>
<td>面议</td>
</tr>
<tr>
<td>7</td>
<td>高级用户研究经理</td>
<td>1</td>
<td>北京</td>
<td>本科</td>
<td>30岁以上</td>
<td>面议</td>
</tr>
<tr>
<td>8</td>
<td>高级Android开发工程师</td>
<td>3</td>
<td>长春</td>
<td>本科</td>
<td>30岁以上</td>
<td>面议</td>
</tr>
</tbody>
</table>
</body>
</html>一、实现滚动的核心逻辑
这段代码通过 CSS 改变表格的显示模型，将传统的二维表格（行×列）转换为横向滚动的布局。核心思路是：
把表头（thead）固定在左侧，作为行标签
把表体（tbody）设置为可横向滚动
每一行数据（tr）变成内联块，水平排列
所有单元格（td、th）变成块级元素，垂直堆叠
最终效果：表头固定，数据行可以左右滑动查看，非常适合手机屏幕显示宽表格。
二、逐行讲解 Style 标签里的代码
1. 媒体查询（第 7 行）
css
@media only screen and (max-width: 800px) {作用：当屏幕宽度 ≤ 800px 时（手机、平板竖屏），应用大括号内的样式
only screen：只针对屏幕设备（排除打印机等）max-width: 800px：最大宽度 800 像素
2. IE 兼容性修复（第 8 行）
css
*:first-child+html .cf { zoom: 1; }作用：针对旧版 IE 浏览器的 hack，触发 hasLayout（IE 的渲染机制）
*:first-child+html：选择 IE7 及更早版本.cf：清除浮动的类（代码中未使用，可能是预留）zoom: 1：触发 IE 的 hasLayout，修复布局 bug
⚠️ 这是老代码，现代浏览器不需要，可以删除。
3. 表格基础样式（第 9 行）
css
table { width: 100%; border-collapse: collapse; border-spacing: 0; }width: 100%：表格占满父容器宽度border-collapse: collapse：合并相邻边框（避免双边框）border-spacing: 0：单元格间距为 0
4. 单元格基础样式（第 10-13 行）
css
th, td { margin: 0; vertical-align: top; }th { text-align: left; }margin: 0：移除默认外边距vertical-align: top：内容顶部对齐th { text-align: left }：表头文字左对齐（原表格是居中）
5. 🔑 关键：表格变为块级元素（第 14 行）
css
table { display: block; position: relative; width: 100%; }display: block：表格从table布局变为普通块级元素position: relative：相对定位，为内部绝对定位元素提供参考width: 100%：保持宽度 100%
🎯 滚动逻辑第 1 步：打破表格原有的行列约束布局。
6. 🔑 关键：表头浮动固定（第 15 行）
css
thead { display: block; float: left; }display: block：表头变成块级元素float: left：表头向左浮动，固定在左侧
🎯 滚动逻辑第 2 步：表头浮动后脱离文档流，固定在左边作为行标签。
7. 🔑 关键：表体可横向滚动（第 16 行）
css
tbody { display: block; width: auto; position: relative; overflow-x: auto; white-space: nowrap; }display: block：表体变成块级元素width: auto：宽度自动（填满剩余空间）position: relative：相对定位overflow-x: auto：水平方向溢出时显示滚动条（这是滚动的核心！）white-space: nowrap：强制内容不换行（确保横向滚动）
🎯 滚动逻辑第 3 步：表体设置 overflow-x: auto，当内容宽度超过容器时就出现横向滚动条。
8. 表头行变为块级（第 17 行）
css
thead tr { display: block; }作用：表头中的行变成块级元素
配合
thead的浮动，让表头正确显示
9. 表头单元格右对齐（第 18 行）
css
th { display: block; text-align: right; }display: block：每个th变成块级，垂直堆叠text-align: right：文字右对齐，更符合"行标签"的视觉效果
10. 🔑 关键：数据行水平排列（第 19 行）
css
tbody tr { display: inline-block; vertical-align: top; }display: inline-block：行变成内联块，水平排列（这是横向滚动的关键！）vertical-align: top：顶部对齐
🎯 滚动逻辑第 4 步：原本垂直堆叠的行（tr）变成水平排列，产生横向内容溢出，触发 overflow-x: auto。
11. 数据单元格垂直堆叠（第 20 行）
css
td { display: block; min-height: 1.25em; text-align: left; }display: block：每个td变成块级，在行内垂直堆叠min-height: 1.25em：最小高度，保证空单元格也有高度text-align: left：文字左对齐
12. 边框调整（第 21-26 行）
css
th { border-bottom: 0; border-left: 0; }td { border-left: 0; border-right: 0; border-bottom: 0; }tbody tr { border-left: 1px solid #babcbf; }th:last-child, td:last-child { border-bottom: 1px solid #babcbf; }作用：重新调整边框，让新的布局有清晰的边界
tbody tr { border-left... }：给每行数据左侧添加分隔线th:last-child, td:last-child：最后一行添加底部边框
三、滚动实现逻辑图解
原始表格布局（二维）
text
┌─────┬────────┬─────┬────┐ │序号 │职位名称│人数│地点│ ← 表头行 ├─────┼────────┼─────┼────┤ │ 1 │ Java │ 1 │北京│ ← 数据行1 ├─────┼────────┼─────┼────┤ │ 2 │ PHP │ 2 │上海│ ← 数据行2 └─────┴────────┴─────┴────┘
转换后的横向滚动布局
text
┌─────────────────────────────────────────────┐ │ ┌─────┐ ┌──────────────┐ ┌─────┐ ┌────┐ │ │ │序号 │ │ 职位名称 │ │人数 │ │地点│ │ ← 表头（浮动左侧，实际独立） │ └─────┘ └──────────────┘ └─────┘ └────┘ │ │ │ │ ← 可横向滚动区域 → │ │ ┌────────────────────────────────────────┐ │ │ │ ┌───┐ ┌────────┐ ┌───┐ ┌────┐ │ │ │ │ │ 1 │ │ Java │ │ 1 │ │北京│ │ │ ← 数据行1 │ │ └───┘ └────────┘ └───┘ └────┘ │ │ │ │ ┌───┐ ┌────────┐ ┌───┐ ┌────┐ │ │ │ │ │ 2 │ │ PHP │ │ 2 │ │上海│ │ │ ← 数据行2 │ │ └───┘ └────────┘ └───┘ └────┘ │ │ │ └────────────────────────────────────────┘ │ └─────────────────────────────────────────────┘
四、完整的滚动实现流程图
text
手机屏幕宽度 ≤ 800px
↓
触发媒体查询内的 CSS
↓
┌─────────────────────────────────────────┐
│ 1. table { display: block } │ ← 打破表格布局
│ 2. thead { float: left } │ ← 表头固定在左侧
│ 3. tbody { overflow-x: auto } │ ← 允许横向滚动
│ 4. tbody tr { display: inline-block } │ ← 行水平排列
└─────────────────────────────────────────┘
↓
内容宽度 > 容器宽度
↓
出现横向滚动条
↓
用户可以左右滑动查看所有列五、效果演示
| 屏幕宽度 | 布局方式 | 是否有滚动条 |
|---|---|---|
| > 800px | 普通表格（二维） | 无（可能有页面滚动） |
| ≤ 800px | 表头固定 + 数据行水平滚动 | 有横向滚动条 |
六、代码优缺点分析
✅ 优点
纯 CSS 实现，无需 JavaScript
表头固定，滚动时始终可见
响应式，只在手机尺寸生效
⚠️ 缺点
改变了语义化的 HTML 结构（
display: block破坏了表格语义）对屏幕阅读器不友好（辅助功能较差）
边框样式复杂，容易出 bug
有 IE 的 hack 代码（现代项目不需要）
💡 更好的替代方案
css
@media only screen and (max-width: 800px) {
.table-responsive {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}}用 overflow-x: auto 包裹表格，保持表格结构不变，更简洁且可访问性更好。
总结
这段代码通过 CSS 重构表格的显示模型 实现滚动：
overflow-x: auto：提供滚动能力tr { display: inline-block }：让行水平排列，产生溢出thead { float: left }：固定表头在左侧媒体查询：只在手机尺寸生效