不规则表格本质是 colspan/rowspan 的组合使用，浏览器仍按网格模型渲染；禁用嵌套 table 和 border-radius 修饰整体轮廓；clip-path 不支持 table 元素，需外包 div；border-collapse: separate 是突出结构差异的关键；语义正确与可访问性优先于视觉花哨。

不规则表格本质是 colspan/rowspan 的组合使用

HTML 表格本身没有“不规则形状”这个概念，所谓不规则，全是靠 colspan 和 rowspan 打破标准行列对齐实现的。浏览器渲染时仍按表格网格模型处理，只是视觉上出现跨行跨列的“空缺”或“合并”，形成错落感。

常见错误现象：手动用多个 <table> 嵌套拼接，导致嵌套层级深、响应式失效、打印样式错乱；或误以为加了 <code>border-radius 就能弯曲边框——它只作用于单元格角，无法改变表格整体结构轮廓。

• colspan="n" 让一个 <td> 占据横向 n 列，后续同层 <code><td> 数量需相应减少，否则会多出一列<li> <code>rowspan="m" 让一个 <td> 占据纵向 m 行，下 m−1 行中同一列位置必须留空（不写 <code><td>）<li>混合使用时，务必逐行检查单元格总数是否一致（每行 <code><td>+<code><th> 的 <code>colspan 总和应相等）

  CSS clip-path 不能直接裁剪 table 元素

  想用 clip-path: polygon(...) 给整个 <table> 加锯齿、凹角或斜切边？行不通。table 是 display: table 的特殊元素，多数浏览器（Chrome/Firefox/Safari）不支持对 <code><table> 或 <code><tr> 应用 <code>clip-path，会静默忽略或触发 layout 错乱。

  可行替代路径：

  • 把 <table> 包在 <code><div> 里，对这个外层 <code><div> 应用 <code>clip-path ——但注意：裁剪后可能遮挡表头固定、滚动条或打印区域
  • 用 border-image + SVG 边框图实现“伪不规则边框”，仅适用于简单轮廓（如波浪线、齿轮齿）
  • 真正需要自由形状（如星形、云朵），放弃 <table>，改用 <code><div> + CSS Grid 模拟表格语义，并用 <code>aria-role="table" 保无障碍

    border-collapse: separate 是实现“虚实边框错位”的关键

    默认 border-collapse: collapse 会让相邻单元格边框合并为一条线，这会掩盖 colspan/rowspan 带来的结构差异。要突出不规则感，必须设为 separate，再配合 border-spacing 控制间隙。

    示例场景：让第一行标题栏比下面数据行更宽，同时右侧留白形成“L 形”视觉：

    

    Wechat HTML Publisher

    直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

    下载

    <style>
    .t-irregular {
      border-collapse: separate;
      border-spacing: 0 2px; /* 垂直间距 2px，水平为 0 */
    }
    .t-irregular td, .t-irregular th {
      border: 1px solid #ccc;
    }
    .t-irregular tr:first-child th {
      border-right: none; /* 右侧无边，制造缺口 */
    }
    </style>

    容易踩的坑：

    • border-spacing 在 collapse 模式下无效，设了也白设
    • IE 不支持 border-spacing 对 <thead>/</thead> <tbody> 分开设置，统一作用于整个表<li>移动端 zoom 时，小尺寸 <code>border-spacing 可能被渲染为 0，需测试实际设备

    真正“不规则”的边界在语义层而非视觉层

    如果业务要求导出 Excel、打印 PDF 或屏幕阅读器正确读表，就别强行用 CSS 扭曲 <table>。那些看似花哨的斜切、镂空、悬浮角，对辅助技术来说仍是不可理解的噪音。<p>务实做法：</p> <ul><li>用标准 <code><table> + <code>colspan/rowspan 实现逻辑上的不规则（比如合并抬头、跳过空列）

    • 用 CSS 装饰：给特定 <td> 加 <code>background-image 模拟斜线分隔，或用伪元素 ::after 绘制小三角指示方向
    • 复杂布局（如 T 型、Z 型、环形数据区）直接拆成多个语义清晰的 <section></section> + <dl></dl>，比硬拗表格更健壮

    最常被忽略的一点：不规则不是目的，可访问、可维护、可扩展才是。别为了视觉“特别”牺牲结构诚实性。