如何在设置td为display:block时保持单元格间的双线边框？

问题原因 #

你遇到的这个情况，核心在于表格边框的渲染依赖表格布局上下文：

• 默认情况下，浏览器会把<td>当作表格单元格（display: table-cell）处理，结合表格默认的border-collapse: separate属性，相邻单元格的边框（包括表格自带的内部边框）会相互叠加，形成你看到的双线效果。
• 当你给#tb2 td设置display: block后，<td>脱离了表格的布局上下文，变成了普通块级元素。这时候表格的边框渲染规则不再适用于它，相邻块级元素的边框不会像表格单元格那样叠加，原本的双线视觉效果自然就消失了。

满足条件的解决方案 #

要同时实现单列布局和保留双线边框，且符合你提出的两个限制（不添加额外HTML元素、不手动设置CSS边框），关键是不让<td>脱离表格布局体系，而是通过CSS调整它在表格中的角色：

#tb2 {
  /* 保持表格的基础布局特性 */
  display: table;
}
#tb2 td {
  /* 将每个<td>转换为表格行，浏览器会自动把内部文本转为单元格 */
  display: table-row;
}

这个方案的原理是：

1. 保持表格的display: table特性，确保浏览器仍用表格边框规则渲染
2. 把每个<td>改成display: table-row，让单个<td>成为独立的表格行，自动生成包含文本的匿名单元格
3. 依赖表格自带的border="1"和默认的border-collapse: separate，自动在各行之间生成双线边框，完全符合你的需求

验证效果 #

• 原来的<table border="1">会为每个自动生成的单元格添加边框，结合border-collapse: separate的默认间距，形成双线视觉效果
• 每个<td>现在作为独立行存在，自然呈现单列布局，不需要额外的<tr>或其他HTML元素
• 全程没有手动设置任何CSS边框属性，完全依赖浏览器的表格默认渲染规则

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