CSS/HTML新手求教：如何创建列固定、行数可变的表格？
2026-5-25
如何创建行数可变的HTML表格（附CSS样式示例）
Hey there! 作为刚摸CSS/HTML的新手，想做行数可变的表格真的没那么复杂——我来一步步给你讲明白，附上简单好上手的示例～
先搞懂核心逻辑
行数可变的表格本质就是HTML搭骨架，CSS调样式：HTML负责定义表头、表体的基础结构，CSS用来控制外观、自适应布局，不管你后续加多少行，只要往指定区域塞内容就行。
你需要用到的CSS关键属性
我挑几个最实用的给你列出来：
table-layout: auto: 让表格根据内容自动调整列宽，完美适配行数变化的场景；如果想要固定列宽，换成**fixed**就行border-collapse: collapse: 合并表格的边框，不会出现难看的双线条overflow-y: auto+max-height: 要是表格行数可能特别多，给表体套个容器加这俩属性，超过高度就会出现滚动条，不会撑爆页面line-height: 调整行高，让每行文字看起来更舒服，不会挤在一起
HTML结构怎么写？
我们把表头放在<thead>标签里，动态变化的行全部放在<tbody>里——不管你后续加多少行，只要往<tbody>里加<tr>（表格行）就行，超级灵活。
完整可运行示例代码
<!DOCTYPE html> <html> <head> <style> /* 给表格起个类名，方便复用样式 */ .dynamic-table { width: 100%; border-collapse: collapse; table-layout: auto; font-family: Arial, sans-serif; } /* 表头样式，让它看起来更突出 */ .dynamic-table thead th { background-color: #f2f2f2; padding: 10px; text-align: left; border-bottom: 2px solid #ddd; } /* 表体每行的样式 */ .dynamic-table tbody td { padding: 8px; border-bottom: 1px solid #ddd; line-height: 1.5; } /* 可选：鼠标悬停时高亮行，提升交互感 */ .dynamic-table tbody tr:hover { background-color: #f9f9f9; } /* 可选：限制表格最大高度，超过后滚动 */ .table-scroll-container { max-height: 300px; overflow-y: auto; display: block; border: 1px solid #ddd; } </style> </head> <body> <!-- 带滚动容器的表格（如果不需要滚动，直接去掉外层div就行） --> <div class="table-scroll-container"> <table class="dynamic-table"> <thead> <tr> <th>序号</th> <th>技术名称</th> <th>简单描述</th> </tr> </thead> <tbody> <!-- 这里可以随便加多少行，表格都会自动适配 --> <tr> <td>1</td> <td>HTML</td> <td>用来搭建网页结构的标记语言</td> </tr> <tr> <td>2</td> <td>CSS</td> <td>用来美化网页样式的语言</td> </tr> <tr> <td>3</td> <td>JavaScript</td> <td>让网页动起来的脚本语言</td> </tr> <!-- 你可以继续添加更多<tr>行，完全没问题 --> </tbody> </table> </div> </body> </html>
关键小贴士
- 动态行数怎么实现？：只要在
<tbody>里新增或删除<tr>标签，表格就会自动更新行数，CSS样式会自动应用到所有新行上 - 滚动功能要不要加？：如果你的表格行数可能超过10行左右，建议加上外层的
.table-scroll-container，避免表格太长影响页面布局 - 样式复用：给表格加类名（比如
.dynamic-table），这样你在页面里可以多次使用这个表格样式，不用重复写CSS
内容的提问来源于stack exchange，提问作者Rahul
