iOS Safari中表格单元格colspan对齐异常问题咨询

问题原因 #

这是Safari表格布局引擎的兼容性问题：当表格仅通过colspan属性隐式定义总列数（此处为6列），而没有显式声明基础列结构时，Safari的布局算法会优先基于每行的单元格数量推断列的分布逻辑，而非严格遵循总跨列数的公约数计算。

具体到你的案例：第一行3个单元格（每个colspan=2），Safari会先把表格拆分为3个等宽列；第二行的colspan=3会被错误映射到这个3列结构上，导致第一个单元格只占2个“伪列”，最终出现分割线不对齐的问题。而Firefox等浏览器会正确计算总跨列数的公约数（6），以此为基础布局。

修复方案 #

方案1：显式声明基础列结构 #

通过<colgroup>和<col>标签明确表格的6个基础列，让浏览器直接以这个结构为基准处理colspan：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
table,td {border: 1px solid black;border-collapse: collapse;}
</style>
</head>
<body>
<table>
  <colgroup>
    <col><col><col><col><col><col>
  </colgroup>
  <tbody>
    <tr>
      <td align="center" valign="middle" colspan="2">AAAA</td>
      <td align="center" valign="middle" colspan="2">BBBB</td>
      <td align="center" valign="middle" colspan="2">CCCC</td>
    </tr>
    <tr>
      <td align="center" valign="middle" colspan="3">DDDD</td>
      <td align="center" valign="middle" colspan="3">EEEE</td>
    </tr>
  </tbody>
</table>
</body>
</html>

方案2：使用固定表格布局 #

给表格添加table-layout: fixed样式，强制浏览器按预设的列结构（而非内容）计算布局，同时可以配合宽度设置确保列均匀分布：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
table {
  border: 1px solid black;
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%; /* 或指定固定宽度 */
}
td {border: 1px solid black;}
</style>
</head>
<body>
<table>
  <tbody>
    <tr>
      <td align="center" valign="middle" colspan="2">AAAA</td>
      <td align="center" valign="middle" colspan="2">BBBB</td>
      <td align="center" valign="middle" colspan="2">CCCC</td>
    </tr>
    <tr>
      <td align="center" valign="middle" colspan="3">DDDD</td>
      <td align="center" valign="middle" colspan="3">EEEE</td>
    </tr>
  </tbody>
</table>
</body>
</html>

内容的提问来源于stack exchange，提问作者Melab