Reputation: 123

Eliminating gap between vertical borders of table <td>s

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>

Upvotes: 12

Answers (4)

uday

Reputation: 8710

Why make your life complicated when you can do the following:

convert word file into a pdf & host it using HTML embed or object tags!

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

Upvotes: 0

Mr Lister

Reputation: 46559

Dispensing with the table is the better idea. You can turn the headings into <h2> elements (or whatever level of <h> is appropriate) and have it float left and give the text a wide enough left margin.

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

Upvotes: 5