I'm currently in the process of translating my resume from MS Word to HTML and CSS for easier maintenance and sharing purposes. I really like the layout and style of my resume and want to maintain it. The design features a left column with bold titles such as "Education" and "Experience", right-aligned against a vertical separator.
In Word, this layout is achieved using a table where the central border is set to solid while the other borders are blank. This setup ensures that section titles align vertically with their corresponding content.
However, when I tried to replicate this technique using columns in Firefox and Chrome, there were visible gaps at the vertical divisions within the table which detracted from the overall effect.
I considered using two divs - one for the headings and one for the content. Unfortunately, without specifying fixed pixel heights (which brings its own issues), I couldn't find a way to keep them perfectly aligned vertically.
Is there a solution that would allow me to maintain the alignment between the titles and content without compromising on the aesthetic?
The current table code snippet 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>