CSS表格行与单元格宽度：如何让第三单元格占100%且底行独立？

我懂你现在的困扰——用CSS模拟表格结构时，想让第二行的单个单元格占满整个表格宽度，但因为display: table的特性，列宽会被第一行的单元格约束，导致第二行的单元格没法撑满。下面给你两种可行的解决思路，按需选择：

方案一：改用原生表格元素（最简单直接） #

原生HTML表格天生支持跨列属性colspan，能完美解决你的需求，而且语义化更好：

修改后的HTML代码：

<table class="table">
  <tr class="row">
    <td class="cell cell-1">1</td>
    <td class="cell cell-1">2</td>
  </tr>
  <tr class="row">
    <td class="cell cell-3" colspan="2">3</td>
  </tr>
</table>

对应的CSS只需微调（去掉原生表格不需要的display属性）：

/* Table */
* { box-sizing: border-box; }
.table { width: 300px; margin-bottom: 1rem; border: 2px solid rgba(255, 0, 0, .40); }
/* Grid Width */
.cell-1 { width: 50%; }
/* Decoration */
body { font-family: monospace; font-size: 15px; }
.cell { 
  line-height: 3; 
  text-align: center; 
  background-color: rgba(255, 0, 0, .3); 
  border: 1px solid white; 
}

方案二：继续使用div模拟表格，通过CSS实现独立行效果 #

如果不想改动HTML结构，可以通过调整display属性，让第二行脱离表格的列约束：

修改后的CSS（新增.cell-3的样式）：

/* Table */
* { box-sizing: border-box; }
.table { display: table; width: 300px; margin-bottom: 1rem; border: 2px solid rgba(255, 0, 0, .40); }
/* Grid */
.row { display: table-row; }
.cell { display: table-cell; }
/* Grid Width */
.cell-1 { width: 50%; }
.cell-3 { 
  display: block; /* 脱离table-cell的列布局约束 */
  width: 100%; 
}
/* Decoration */
body { font-family: monospace; font-size: 15px; }
.cell { line-height: 3; text-align: center; background-color: rgba(255, 0, 0, .3); border: 1px solid white; }

原理说明 #

• 原生表格的colspan="2"会让单元格直接跨越第一行的两列，自然占满整个表格宽度；
• 第二种方案里，把.cell-3改成display: block后，它就不再受table-row的列规则限制，能直接继承表格的宽度，实现独立行的效果。

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