CSS学习02 动态列数表格开发，解决多组数据布局与边框重合问题

2025/4/19 9:58:20 来源：https://blog.csdn.net/weixin_44185995/article/details/147141677 浏览: 次关键词：CSS学习02 动态列数表格开发，解决多组数据布局与边框重合问题

概要

在前端开发中，表格常用于展示结构化数据。当数据组的字段数量不统一时（如有的行包含 3 组数据，有的行包含 2 组或 1 组），传统固定列数的表格会出现结构错位、边框重合等问题。本文通过 HTML/CSS 规范方法，实现灵活适应不同数据组数的表格布局，确保视觉一致性和结构完整性。

解决方案

通过 HTML 表格的 colspan（跨列）属性动态调整列数，结合 CSS 的 border-collapse 合并边框，实现灵活且规范的表格布局

源码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>动态列数表格</title><style>table {width: 1000px;margin: 40px auto;border-collapse: collapse;border: 1px solid #ccc;font-family: Arial, sans-serif;}th,td {border: 1px solid #d9d9d9;padding: 10px;}th {background-color: #f3f3f3;text-align: right;font-weight: bold;width: 120px;}td {word-wrap: break-word;word-break: break-all;}</style></head><body><table><tr><th>UserName：</th><td>Zhou Maomao</td><th>Telephone：</th><td>1810000000</td><th>Live：</th><td>Hangzhou, Zhejiang</td></tr><tr><th>Remark：</th><td>empty</td><th>Status：</th><td colspan="4">Running</td></tr><tr><th>Address：</th><td colspan="5">No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China</td></tr></table></body>
</html>