« セレクタ  | メイン | テキストリンクのカラーを部分的に変更する »

テーブルのセルのボーダー指定
:::: CSS ::::

<td>タグにボーダーの設定をすると、セルの重なり部分のボーダーが太ってしまう。

td { border: 1px solid #990000; }

         
         
         
         
         

回避するには、 border-collapse を指定する。
border-collapse とは、テーブルにおけるセルのボーダー表示形式を指定するためのプロパティです。値には collapse と separate があり、collapse はテーブル全体や各セルのボーダーを重ねて表示し、separate は別々に表示します。

td { border: 1px solid #990000; }
table { border-collapse: collapse; }

         
         
         
         
         

※クラス名で指定した方が使用しやすい。
.table-collapse { border-collapse:collapse; }

※ただしレイヤー、インラインフレームに使用すると不具合が発生することがある。

トラックバック

このエントリーのトラックバックURL:

コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)

>>> ページトップ

カテゴリー

最近のエントリー