本文介绍两种主流方法实现表格中某一行“左半部分跨两列、右半部分占一列”的布局效果：原生 HTML 的 colspan 属性方案与现代 CSS Grid 方案，兼顾兼容性与可维护性。
本文介绍两种主流方法实现表格中某一行“左半部分跨两列、右半部分占一列”的布局效果：原生 html 的 `colspan` 属性方案与现代 css grid 方案，兼顾兼容性与可维护性。
在标准 HTML 表格中，若需某一行仅显示两个逻辑单元格（如左侧内容横跨前两列、右侧内容独占第三列），不能通过简单删除 <td> 实现，而应利用语义化属性或现代布局技术精准控制列跨度。
✅ 方法一：使用 colspan（兼容性最佳）
这是最直接、浏览器支持最广的方式。关键在于让第一个 <td> 占据前两列，第二个 <td> 占据第三列：
<table border="1">
<tr>
<th>Data 1</th>
<th>Data 2</th>
<th>Data 3</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<!-- 目标行：左侧"aaa"跨2列，右侧"bbb"占第3列 -->
<tr>
<td colspan="2">aaa</td>
<td>bbb</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
</table>⚠️ 注意事项：
- colspan="2" 表示该单元格横向合并 2 列，必须确保整行 <td> 数量总和仍为 3（即 2 + 1 = 3），否则表格结构会错乱；
- 此法语义清晰、无需额外样式，适用于所有浏览器（包括 IE9+）；
- 若需居中对齐 "aaa" 内容，可添加 style="text-align: center" 或通过 CSS 控制。
✅ 方法二：使用 CSS Grid（更灵活、语义更自由）
当项目允许现代浏览器支持（Chrome 57+, Firefox 52+, Safari 10.1+）时，CSS Grid 提供更直观的布局控制：
立即学习“前端免费学习笔记（深入）”；
.grid-table {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background-color: #000;
}
.grid-table > * {
background-color: #fff;
padding: 8px 12px;
}
.grid-table .header {
font-weight: bold;
}
.grid-table .double {
grid-column: span 2; /* 关键：让元素横跨2列 */
}<div class="grid-table"> <div class="header">Data 1</div> <div class="header">Data 2</div> <div class="header">Data 3</div> <div>Data 1</div> <div>Data 2</div> <div>Data 3</div> <div class="double">aaa</div> <div>bbb</div> <!-- 自动填入第3列 --> <div>Data 1</div> <div>Data 2</div> <div>Data 3</div> </div>
✅ 优势：
- 不依赖 <table> 标签，结构更语义化（可用 <section> 或 <div> 组织）；
- grid-column: span 2 显式声明跨列行为，逻辑比 colspan 更易维护；
- 可轻松实现响应式列数调整（如 @media 下改为 repeat(2, 1fr)）。
总结建议
- 优先选 colspan：用于传统表格场景、需兼容老旧环境、强调语义正确性（如数据报表、无障碍访问）；
- 选用 CSS Grid：用于自定义布局、复杂嵌套、或已采用现代前端架构（如 React/Vue 中动态渲染表格）；
- 避免混合使用：不要在 <table> 内部强行套用 display: grid，会导致语义冲突与可访问性问题。
两种方案均能精准实现“中间行左跨两列、右占一列”的视觉效果，选择取决于项目约束与长期维护目标。
