Question

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>

`

Answer 1

I’d go with:

table { border-collapse: collapse; }

It would eliminate the gaps and allow table borders.