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; }

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

相关文章

vue阻止冒泡事件 阻止点击事件的执行 &lt;div @click=&a...
尝试过使用网友说的API接口获取 找到的都是失效了 暂时就使用...
后台我拿的数据是这样的格式: [ {id:1 , parentId: 0, name:...
JAVA下载文件防重复点击,防止多次下载请求,Cookie方式快速简...
Mip是什么意思以及作用有哪些