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

news2025/4/15 10:01:36

概要

在前端开发中，表格常用于展示结构化数据。当数据组的字段数量不统一时（如有的行包含 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>