Clearing the gap between the vertical borders of the table <td> s

Question

I have a resume that I am trying to translate from MS Word to HTML and CSS to simplify maintenance and sharing. I like the style of the resume, and I would rather keep it. It has a left column with headings such as "Education", "Experience", etc. Bold and right justified with respect to the vertical separator.

In Word, this is achieved by the table, while the style of the central border is set to solid, and the other borders are equal to the space. This allows you to align section headings with related content.

I tried just to duplicate this technique, but in Firefox and Chrome, if I set the border-right tds attribute column to solid, there are spaces in the vertical sections of the table. This view destroys the effect.

I thought of using two divs, one with headers and one with content, but with the exception of hard-coded pixel heights (which have their obvious problems), I can't figure out how to keep them vertically in sync.

Is there a way to do this without losing the ability to keep headlines and related content vertically?

The table code looks something like this:

<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

I would go with:

table { border-collapse: collapse; }

This will eliminate the spaces and allow the use of table borders.

Answer 2

border-spacing: 0;, TD.

Answer 3

Distributing with a table is the best idea. You can turn headings into elements <h2>(or some level <h>) and place it to the left and give the text a sufficiently large left margin.

Something like this jsfiddle , or is it not what you want?

Answer 4

Why is your life complicated if you can do the following:

convert the wordfile to pdfand place it using HTML tags embedor object!

edit: http://jsfiddle.net/uday99/WzGeX/2/