1ピクセルの罫線
1ピクセルの罫線について書いてみる。
1ピクセルの罫線はみなさんどのように書いているのだろう？
いろいろ方法があるけれど、初心者の方は結構戸惑うのでは？？
テーブルの属性で普通にボーダー1ピクセルとしてしまうと明らかにイメージしたものは
これより細いはずなのに、
<table width="300" border="1" cellpadding="0" cellspacing="0">
<tr>
<th> </th>
<th> </th>
<th> </th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
ボーダーは1ピクセルに指定しているのにこのように表示されてしまう。
わたしもこれには悩んだ・・・・・・
なんで？？？？
ではボーダー1ピクセル、セル間隔1ピクセルにしてみよう
<table width="300" border="1" cellpadding="0" cellspacing="1">
<tr>
<th> </th>
<th> </th>
<th> </th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
これですよね。テーブルの外枠とひとつひとつのセルが1ピクセルずつだから、セル間隔を0ピクセルにすると枠の線は2ピクセルになってしまう。
それではセルの感覚を1ピクセルにして、背景の色を指定して1ピクセルの罫線を描くやり方。
<table width="300" border="0" cellpadding="0" cellspacing="1" bgcolor="#000000">
<tr>
<th bgcolor="#FFFFFF"> </th>
<th bgcolor="#FFFFFF"> </th>
<th bgcolor="#FFFFFF"> </th>
</tr>
<tr>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
</table>
すべてのtdに背景色白を指定。テーブルの背景色は黒。セル間隔1ピクセル。
セル間隔の部分だけが黒に見えている感じですね。
td全てに背景色を指定するのでコードが複雑になります。
それでは下のようにボーダーは1ピクセル、ボーダーの色は黒。
下記のようなコードですが、ID指定はtestにしてあります。
<table width="300" border="1" cellpadding="0" cellspacing="0" bordercolor="#000000" id="test">
<tr>
<th> </th>
<th> </th>
<th> </th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
表示は
こうですね。
しかし、スタイルシートで
#test {
border-collapse:collapse;
}
これだけ追記してやれば1ピクセルの罫線を書くことができます。
これはテーブルの外枠とTDの外枠とを重ねて表示するというCSSです。
ID指定してたった1行のスタイルシートを記するだけですからコードもとてもシンプルです。
しかし問題点もあります。
border-collapse:collapse;
↑このCSSが対応していないブラウザもあるのです。
これは困りますね。一日も早く全てのブラウザで同じ表示をしてもらえるようにしてもらいたいものですね。
ではこちらはどうでしょうか？
#test {
border-collapse:collapse;
border-top-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
}
#test td {
border-right-width: 1px;
border-bottom-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-right-color: #000000;
border-bottom-color: #000000;
}
テーブルのIDをtestとし、上と左に1ピクセルのボーダーを引きます。
その中のTDには右と下に1ピクセルのボーダーを引きます。
一応主要なブラウザでテストしてみましたが不具合もなくもっとも完成形に近いかたちではないかと思います。
もしこれを読んでいただいたかたでいい方法が他にあれが教えていただきたいと思います。