I have a resume that I'm trying to translate from MS Word into HTML and CSS for easier maintenance and sharing. I like the style of the resume, and would prefer to keep it. It has a left column, with titles like "Education", "Experience", etc. in bold, and right-aligned against a vertical separator.
In Word this is achieved by a table, with the style of the central border set to solid, and the other borders set to blank. This allows the section titles to be vertically aligned with the associated content.
I tried to simply duplicate this technique, but in Firefox and Chrome, if I set a column of tds' border-right attributes to solid, there are gaps at the vertical divisions of the table. This sort of ruins the effect.
I thought of using two divs, one with the headings and one with the content, but other than hard-coding pixel heights (which has its own obvious sets of 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 the titles and their associated content vertically aligned?
The table code looks something like
<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>
`