及川WEB室|ホームページ制作

HTML、CSS、JavaScript、スマートフォンサイト、Facebookなど、サイト制作に関する事をメモしています。
個人的な備忘録です。
及川WEB室 ホームページ制作HOME
及川WEB室 > CSS > テーブルとセルの枠線を1pxにする方法

テーブルとセルの枠線を1pxにする方法

table は、デフォルトだと table と th と td のそれぞれにボーダーが表示され、
線が2重になってしまう。

表示例

デフォルトのまま

table タグに「border="1"」が入っている状態で表示すると線が2重になる。
th01 td01_1 td01_2
th02 td02_1 td02_2
th03 td03_1 td03_2

table タグに「border="1"」と「cellspacing="0"」が入っている状態。
2重線の間の余白がなくなるので線が太くなっているように見える。
th01 td01_1 td01_2
th02 td02_1 td02_2
th03 td03_1 td03_2

ボーダーを1pxにしたもの

th01 td01_1 td01_2
th02 td02_1 td02_2
th03 td03_1 td03_2

CSSでテーブルとセルの枠線を1pxにする方法

css

#tbl-bdr table,#tbl-bdr td,#tbl-bdr th {
	border-collapse: collapse;
    border:1px solid #333;
    }
2行目「border-collapse: collapse;」で、2重になっている線を重ねて1本にする。
3行目で線の太さ・種類・色を指定。

テーブルのHTMLタグ

th01 td01_1 td01_2
th02 td02_1 td02_2
th03 td03_1 td03_2
この場合、table タグに「border="1"」は入れない。

↓このように表示されます。
th01 td01_1 td01_2
th02 td02_1 td02_2
th03 td03_1 td03_2

以上です。
MENU Ξ