Edit Question - KnowledgeHub

Title Body

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> `

Tags (comma-separated) Cancel