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

及川WEB室

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

及川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タグ

<div id="tbl-bdr">
<table width="100%">
  <tbody><tr>
    <th>th01</th>
    <td>td01_1</td>
    <td>td01_2</td>
  </tr>
  <tr>
    <th>th02</th>
    <td>td02_1</td>
    <td>td02_2</td>
  </tr>
  <tr>
    <th>th03</th>
    <td>td03_1</td>
    <td>td03_2</td>
  </tr>
</tbody></table>
</div>

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

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

th01	td01_1	td01_2
th02	td02_1	td02_2
th03	td03_1	td03_2

以上です。