HTML 合并双表场景下Column Span（列跨度）设置问题咨询

实现方案 #

核心逻辑是取3和5的最小公倍数15作为表格总列数，通过colspan属性控制单元格跨列数，实现上下部分不等分区块的对齐效果，不会出现列宽错位问题。

完整可运行代码示例 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>整合表格实现</title>
<style>
table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}
table, th, td {
  border: 1px solid #000;
}
.top-block {
  height: 100px;
  background-color: #f0f0f0;
}
.bottom-block {
  height: 100px;
  background-color: #e8f4fd;
}
</style>
</head>
<body>
<table>
  <!-- 上半部分3个区块，每个跨5列 3*5=15 -->
  <tr>
    <td colspan="5" class="top-block">上区块1</td>
    <td colspan="5" class="top-block">上区块2</td>
    <td colspan="5" class="top-block">上区块3</td>
  </tr>
  <!-- 下半部分5个区块，每个跨3列 5*3=15 -->
  <tr>
    <td colspan="3" class="bottom-block">下区块1</td>
    <td colspan="3" class="bottom-block">下区块2</td>
    <td colspan="3" class="bottom-block">下区块3</td>
    <td colspan="3" class="bottom-block">下区块4</td>
    <td colspan="3" class="bottom-block">下区块5</td>
  </tr>
</table>
</body>
</html>

效果说明 #

• 上半部分每个区块宽度为总宽度的1/3，下半部分每个区块宽度为总宽度的1/5，完全对齐没有偏移
• 可根据需求调整单元格高度、背景色、边框等样式参数
• 如果是Excel中实现该效果，操作逻辑一致：先插入15列的表格，上半部分每5列合并为1个单元格，下半部分每3列合并为1个单元格即可。

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