html - 消除表格 s 垂直边框之间的间隙

Question

我有一份简历，正在尝试将其从 MS Word 转换为 HTML 和 CSS，以便于维护和共享。我喜欢简历的风格，希望保留它。它有一个左栏，标题如“教育”、“经验”等以粗体显示，并与垂直分隔符右对齐。

在 Word 中，这是通过表格实现的，其中中央边框的样式设置为实心，其他边框设置为空白。这允许章节标题与相关内容垂直对齐。

我试图简单地复制这种技术，但在 Firefox 和 Chrome 中，如果我将 tds 的 border-right 属性的一列设置为 solid，则表格的垂直分隔处会有间隙。这样就破坏了效果。

我想过使用两个 div，一个是标题，一个是内容，但是除了硬编码像素高度(它有自己的一系列明显问题)之外，我不知道如何保持它们垂直同步。

有没有办法在不失去保持标题及其相关内容垂直对齐的能力的情况下做到这一点？

表格代码看起来像

<table>
<tr><td style="border-right:1px solid black;">Education</td><td> [Name of School, etc.]</td></tr>
<tr><td style="border-right:1px solid black;">Experience</td><td>[Work experience]</td></tr>
.
.
.
</table>

`

Answer 1

我会选择:

table { border-collapse: collapse; }

它将消除间隙并允许表格边框。