htmlで作成するテーブルの横線の太さを変えたい

質問

よろしくお願いします。

htmlでテーブルを使用しての表を作っているのですが、
見やすくするために横線の太さを変えたいと思っています。
基本的なhtmlタグとスタイルシートの書き方は理解できますが、以下のよう作る方法が
どうしてもわかりません。

10×10のセルのテーブルとした時に、

1. 全体の外枠は3pxの太さ。
2. 内側の縦線はすべて1px。
3. 3行おきに、セルの下部分の太さを2pxにしたい。（3行おきに区切り線を表示したい）

もし無理であれば、全体の外枠と3行おきのセル下部分の太さが同じ（2px)でもよいです。

どなたかご返答よろしくお願いいたします。

回答No.1

yambejp · ベストアンサー

3行おきとか・・・そういうのは個別にクラスを設定してやる必要がありますね
こんな感じでどうですか？

<style>
table{
border-collapse:collapse;
border:3px solid #000000;
}
td{
border-left:1px solid #000000;
border-right:1px solid #000000;
}
tr.border td{
border-bottom:2px solid #000000;
}
</style>

<table>
<tbody>
<tr><td>1</td><td>xxx</td><td>xxx</td></tr>
<tr><td>2</td><td>xxx</td><td>xxx</td></tr>
<tr class="border"><td>3</td><td>xxx</td><td>xxx</td></tr>
<tr><td>4</td><td>xxx</td><td>xxx</td></tr>
<tr><td>5</td><td>xxx</td><td>xxx</td></tr>
<tr class="border"><td>6</td><td>xxx</td><td>xxx</td></tr>
<tr><td>7</td><td>xxx</td><td>xxx</td></tr>
<tr><td>8</td><td>xxx</td><td>xxx</td></tr>
<tr class="border"><td>9</td><td>xxx</td><td>xxx</td></tr>
<tr><td>10</td><td>xxx</td><td>xxx</td></tr>
</tbody>
</table>

お礼

ありがとうございます、非常に簡潔に出来て感動です。
縦線と横線の個別の指定方法が理解できました。
助かりました、本当にありがとうございました。

回答No.2

grumpy_the_dwarf

行の編集をしても勝手に3行おきにってのは思いつきませんでした。3行ごとにtbodyで包んでやるとラクかなぁって感じ。

TABLE {
border-collapse: collapse;
border: 3px solid black;
}
TBODY {
border: 2px solid red;
}
TD {
border: 1px solid blue;
}

<table>
<tbody>
<tr><td>abcd</td><td>efgh</td></tr>
<tr><td>ijkl</td><td>mnop</td></tr>
<tr><td>qrst</td><td>uvwxyz</td></tr>
</tbody>
<tbody>
<tr><td>abcd</td><td>efgh</td></tr>
<tr><td>ijkl</td><td>mnop</td></tr>
<tr><td>qrst</td><td>uvwxyz</td></tr>
</tbody>
<tbody>
<tr><td>abcd</td><td>efgh</td></tr>
<tr><td>ijkl</td><td>mnop</td></tr>
<tr><td>qrst</td><td>uvwxyz</td></tr>
</tbody>
</table>

論理的にはあまり美しくないけど。

お礼

ご返答ありがとうございました。
tbodyをなるほどこんな使い方もできるのかと参考になりました！
今後も参考にさせていただきます。
本当にありがとうございました。