テーブルの縦の境界線の間の隙間をなくすs

MS WordからHTMLとCSSに翻訳して、メンテナンスと共有を容易にしたいという履歴書があります。私は履歴書のスタイルが好きで、それを保つことを好むだろう。それは太字の "Education"、 "Experience"などのタイトルを持つ左の列を持ち、縦の区切り記号に対して右寄せになっています。テーブルの縦の境界線の間の隙間をなくすs

Wordでは、中央の枠線のスタイルが実線に設定され、他の枠線は空白に設定された表によって実現されます。これにより、セクションのタイトルを関連するコンテンツと垂直に整列させることができます。

私はこのテクニックを単純に複製しようとしましたが、FirefoxとChromeでは、tdsの境界線右の属性の列を実線に設定すると、表の垂直区画に隙間があります。この種の遺跡は効果を発揮します。

見出しが1つ、内容が1つの2つのdivを使用すると考えられましたが、ハードコーディングのピクセルの高さ以外にも問題はありません。垂直方向に同期する。

タイトルと関連コンテンツを垂直に整列させる機能を失うことなくこれを行う方法はありますか？これは、ギャップを解消し、表の罫線を可能にする

table { border-collapse: collapse; }

：

テーブルコードは、私が一緒に行くだろう

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

出典

2012-02-25 Ben Weinstein-Raun

「テーブルの縦の隙間の隙間」という意味を説明し、コードを記入してください。 –

あなたが望むものを正確に見るために、スクリーンショットなどを追加できますか？ –

これまでに試したことのあるコードと、達成しようとしているもののイメージを共有してください。それは多くの助けになるでしょう。たとえば、コードを[JSFiddle]（http://jsfiddle.net）と共有することができます。 –

ようになります。

出典

2012-02-25 08:25:27

これは実際にOPの質問に答える... – mmcrae

表のborder-spacing: 0;には、子の境界線の間のスペースを削除するTD要素を設定します。

出典

2012-02-25 08:25:59 steveukx

命を救う！、卑劣なテーブルのスタイル –

私のテーブルの 'border-collapse：collapse;'を使って小さなギャップを残しました。まさに私が探していたもの！ – Jez

次の操作を行うことができるときなぜあなたの人生を複雑にする：

それはHTML embedまたはobjectタグを使用してpdf &ホストにwordファイルを変換！

編集：http://jsfiddle.net/uday99/WzGeX/2/

出典

2012-02-25 08:30:57 uday

ポイントの一部は、私が自分の.docxファイルを失い続けて、不可解なpdfファイルからそれらを再作成しなければならないということです。また、視聴者がブラウザにpdfプラグインを持っていない可能性があります。私はむしろ1つのvimで編集可能なファイルを持っていて、タイプミスや経験を得るたびにそのプロセス全体を調べるのではなく、すぐにサーバーにプッシュすることができます。 –

この例を見てください：これは何かしたいと言っているのですか？http：//jsfiddle.net/uday99/WzGeX/2/ – uday

実際、http://jsfiddle.net/kFGmC/は私が望んでいたものです。私は ''タグをそれらのブロック要素として扱うとは考えていませんでした。 –

テーブルで分配は良いアイデアです。見出しを<h2>要素（または<h>の任意のレベル）に変えて、それを左に浮かべて、テキストの左余白を十分に広げることができます。

this jsfiddleのようなものか、これはあなたが望むものではありませんか？

出典

2012-02-25 08:35:26

優秀、ありがとう！正しいことを伝えられたら、それはいつもとても明らかです。 –

テーブルの縦の境界線の間の隙間をなくす​​s

答えて

関連する問題

テーブルの縦の境界線の間の隙間をなくすs