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

时间:2012-02-25 08:21:14

标签: html css html-table

我有一份简历,我正试图将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>

`

4 个答案:

答案 0 :(得分:22)

我会选择:

table { border-collapse: collapse; }

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

答案 1 :(得分:6)

在表格中,设置border-spacing: 0;,删除子TD元素的边框之间的空格。

答案 2 :(得分:5)

分配表是更好的主意。 您可以将标题转换为<h2>元素(或<h>适当的任何级别)并让它向左浮动并为文本提供足够宽的左边距。

this jsfiddle之类的东西,或者这不是你想要的?

答案 3 :(得分:0)

为什么在您可以执行以下操作时会让您的生活变得复杂:

word文件转换为pdf&amp;使用HTML embedobject代码托管它!

修改: http://jsfiddle.net/uday99/WzGeX/2/