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

HTML、CSS、JavaScript、スマートフォンサイト、Facebookなど、サイト制作に関する事をメモしています。
個人的な備忘録です。

及川WEB室 > CSS > テーブルとセルの枠線を1pxにする方法

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

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

table タグに「border="1"」が入っている状態で表示すると線が2重になる。

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

#tbl-bdr table,#tbl-bdr td,#tbl-bdr th {
	border-collapse: collapse;
    border:1px solid #333;
    }

2行目「border-collapse: collapse;」で、2重になっている線を重ねて1本にする。
3行目で線の太さ・種類・色を指定。



  
    th01
    td01_1
    td01_2
  
  
    th02
    td02_1
    td02_2
  
  
    th03
    td03_1
    td03_2

この場合、table タグに「border="1"」は入れない。

↓このように表示されます。

以上です。