使用CSS display:table/table-cell模拟表格，避免单单元格占满宽度

我懂你的需求——想用CSS表格布局模拟原生<table>和<td>的排版效果，但又不想在单行只有一个单元格时，让它强行撑满父容器的100%宽度。其实核心问题出在display:table元素的默认宽度行为上，只需要简单调整就能解决。

核心思路 #

默认状态下，display:table的元素会尽可能占满父容器的可用宽度，导致内部单个table-cell也被迫撑满。我们可以通过设置width: fit-content让表格容器的宽度完全由内部单元格的内容决定，这样单个单元格就只会适配自身内容的宽度，不会强行拉伸。

完整代码示例 #

<!-- 单个单元格的情况 -->
<div class="css-table">
  <div class="css-table-cell">我是单个单元格，只占内容宽度</div>
</div>

<!-- 多个单元格的情况 -->
<div class="css-table">
  <div class="css-table-cell">单元格1</div>
  <div class="css-table-cell">单元格2</div>
  <div class="css-table-cell">单元格3</div>
</div>

.css-table {
  display: table;
  width: fit-content; /* 关键：让表格宽度由内容决定 */
  width: -webkit-fit-content; /* 兼容webkit内核浏览器 */
  border-collapse: collapse; /* 模拟原生table的边框合并效果 */
  margin: 10px 0; /* 增加间距方便区分不同表格 */
  border: 1px solid #ddd; /* 可选：添加边框模拟原生table样式 */
}

.css-table-cell {
  display: table-cell;
  padding: 8px 12px; /* 模拟原生<td>的内边距 */
  border: 1px solid #ddd; /* 模拟原生<td>的边框 */
  vertical-align: middle; /* 保持和原生<td>一致的垂直居中行为 */
}

效果说明 #

• 当表格只有一个单元格时，.css-table容器会自动收缩到和单元格内容一致的宽度，不会占满父容器。
• 当有多个单元格时，布局逻辑和原生<table>完全一致，单元格会根据内容自动分配宽度（也可以手动设置固定宽度）。
• border-collapse: collapse确保边框和原生表格一样合并，避免出现双边框问题。
• vertical-align: middle保持单元格内容垂直居中，和原生<td>的默认行为对齐。

可选优化 #

如果需要让单个单元格的表格在父容器中居中显示，只需给.css-table加上margin: 0 auto;即可，既不占满宽度，又能实现居中效果。

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