Устранение разрыва между вертикальными границами стола <td>с

Question

У меня есть резюме, которое я пытаюсь перевести из MS Word в HTML и CSS для облегчения обслуживания и обмена. Мне нравится стиль резюме, и я бы предпочел сохранить его. Он имеет левый столбец с заголовками, такими как «Образование», «Опыт» и т. Д., Выделен жирным шрифтом и выровнен по правому краю относительно вертикального разделителя.

В Word это достигается с помощью таблицы, в которой стиль центральной границы задан как сплошной, а остальные границы - как пустые. Это позволяет заголовкам разделов выравниваться по вертикали с соответствующим содержимым.

Я попытался просто продублировать эту технику, но в Firefox и Chrome, если я установил столбец атрибутов border-right в tds в solid, в вертикальных делениях таблицы есть пробелы. Этот вид разрушает эффект.

Я подумал об использовании двух элементов div, одного с заголовками и одного с содержимым, но кроме жестких значений высоты пикселей (что имеет свои очевидные проблемы), я не могу понять, как держать их вертикально в синхронизации.

Есть ли способ сделать это, не теряя возможности держать заголовки и связанный с ними контент вертикально выровненными?

Код таблицы выглядит примерно так:

<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

Я бы пошел с:

table { border-collapse: collapse; }

Это позволит устранить пробелы и разрешить границы таблицы.

Answer 2

В таблице установите border-spacing: 0;, который удаляет пробелы между границами дочерних элементов TD.

Answer 3

Лучше всего отказаться от стола.Вы можете превратить заголовки в элементы <h2> (или любой подходящий уровень <h>) и сделать так, чтобы он плавал влево и оставил текст достаточно широким левым полем.

Что-то вроде этого jsfiddle , или это не то, что вы хотите?

Answer 4

Зачем усложнять свою жизнь, когда вы можете делать следующее:

конвертировать word файл в pdf и размещать его, используя теги HTML embed или object!

редактировать: http://jsfiddle.net/uday99/WzGeX/2/