本文介绍两种实现“表格中间某行仅含两个单元格，且分隔线位于表格正中央”的方法：传统 HTML 的 colspan 属性方案与现代 CSS Grid 布局方案，兼顾兼容性与可维护性。
本文介绍两种实现“表格中间某行仅含两个单元格，且分隔线位于表格正中央”的方法：传统 html 的 `colspan` 属性方案与现代 css grid 布局方案，兼顾兼容性与可维护性。
在标准三列表格中，若需某一行呈现为“左侧合并两列显示内容 A，右侧单独一列显示内容 B”，关键在于打破默认的等列结构，使视觉分隔线恰好落在表格水平中点。这可通过以下两种主流方式实现：
✅ 方法一：使用 <td colspan="2">（原生 HTML 表格语义化方案）
这是最简洁、兼容性最佳（支持所有浏览器，包括 IE）的方式。核心思路是让第一个 <td> 占据前两列，第二个 <td> 占据第三列，从而自然形成“2+1”布局，视觉上分隔线即位于整表宽度的 2/3 处——但结合等宽列设计（如 table-layout: fixed + 百分比列宽），可精准控制其位于物理中点。
<table border="1" style="width: 100%; table-layout: fixed;">
<tr>
<th style="width: 33.33%;">Data 1</th>
<th style="width: 33.33%;">Data 2</th>
<th style="width: 33.34%;">Data 3</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<!-- 关键行：左侧跨两列，右侧独立一列 -->
<tr>
<td colspan="2" style="text-align: center;">aaa</td>
<td style="text-align: center;">bbb</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
</table>⚠️ 注意事项：
- colspan="2" 必须严格对应表格总列数（此处为 3），否则会导致结构错乱；
- 若需真正“居中分隔”，建议配合 table-layout: fixed 和等宽 th/td 设置，避免浏览器自动重排导致中点偏移；
- 此方案语义清晰，适合数据表格场景，但灵活性较低（如响应式调整、复杂对齐需额外 CSS）。
✅ 方法二：采用 CSS Grid（现代、灵活、声明式布局）
当项目支持现代浏览器（Chrome 57+/Firefox 52+/Safari 10.1+）时，CSS Grid 提供更直观的控制能力。通过定义三列网格，并让特定元素 grid-column: span 2，可天然实现“左占两列、右占一列”，且无需修改 HTML 结构层级。
立即学习“前端免费学习笔记（深入）”；
.grid-table {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 三等分列 */
gap: 1px; /* 网格间隙模拟边框线 */
background-color: #000; /* 间隙颜色即“分隔线”色 */
}
.grid-table > * {
background-color: #fff;
padding: 12px;
border: none;
}
.grid-table > :nth-child(-n+3) {
font-weight: bold;
background-color: #f5f5f5;
}
.double {
grid-column: span 2; /* 关键：跨两列 */
text-align: center;
}<div class="grid-table"> <div>Data 1</div><div>Data 2</div><div>Data 3</div> <div>Data 1</div><div>Data 2</div><div>Data 3</div> <div class="double">aaa</div><div>bbb</div> <div>Data 1</div><div>Data 2</div><div>Data 3</div> </div>
✅ 优势总结：
- 完全脱离 <table> 语义，结构扁平，易于响应式（如 @media 中改为单列）；
- grid-column: span 2 直观表达“跨越两列”，逻辑清晰，维护成本低；
- 可无缝集成 Flexbox、动画等现代 CSS 特性。
? 总结建议
- 优先选择 colspan：用于内容语义明确的表格（如报表、后台数据展示），强调可访问性与向后兼容；
- 倾向 CSS Grid：用于 UI 组件、仪表盘或需要动态布局的场景，兼顾开发效率与设计自由度；
- 无论哪种方式，都应确保视觉中点与逻辑结构一致——通过等宽列定义（1fr 或 33.33%）而非依赖默认渲染，才能稳定达成题设效果。
