html – 消除表格垂直边界之间的差距

我有一份简历,我正在尝试从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>

`

解决方法

我会去：

table { border-collapse: collapse; }

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

原文地址：https://www.jb51.cc/html/225446.html