HTML+CSS表格行内块边框异常：空单元格与含文本单元格渲染不一致求解

这个坑我之前踩过！空单元格里的inline-block元素因为没内容，高度会默认塌陷，导致边框看起来和有文本的单元格不一样，确实挺烦人的。不用手动加空格，这里有几个更优雅的解决方案：

方案1：给inline-block元素设置最小高度 #

直接给td内的inline-block容器设置min-height，让它即使空着也保持和有文本时一致的高度，边框自然就对齐了。建议把min-height设成和文本行高匹配的值，比如1em：

td .cell-inner {
  display: inline-block;
  width: 100%; /* 或者你需要的百分比宽度 */
  min-height: 1em;
  box-sizing: border-box; /* 确保边框/内边距不会撑开宽度 */
}

这个方案简单直接，对所有场景都适用，还不会引入额外隐形内容。

方案2：用伪元素给空元素注入零宽空格 #

如果不想设置固定高度，可以用CSS伪元素给空的inline-block元素加一个零宽空格（\200B）——它不会占用视觉空间，但能让元素保持正常高度：

td .cell-inner:empty::before {
  content: "\200B";
}

这个方法完全不影响布局，只是悄悄给空元素补了个“占位符”，浏览器会把它当成内容渲染，自然就不会塌陷了。

方案3：优化表格布局本身（可选） #

如果你用inline-block只是为了固定列宽百分比，其实可以试试给表格设置table-layout: fixed;，直接给td设宽度百分比，可能不需要inline-block就能实现需求：

.table-container {
  width: 100%;
  table-layout: fixed; /* 强制按设置的列宽渲染 */
}
.table-container td:nth-child(1),
.table-container td:nth-child(2) {
  width: 20%; /* 你需要的百分比 */
}

这个方案能简化HTML结构，减少不必要的嵌套，适合单纯需要固定列宽的场景。

你可以根据实际布局需求选一个最顺手的，亲测都能解决边框不一致的问题～

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