• ベストアンサー

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

よろしくお願いします。 htmlでテーブルを使用しての表を作っているのですが、 見やすくするために横線の太さを変えたいと思っています。 基本的なhtmlタグとスタイルシートの書き方は理解できますが、以下のよう作る方法が どうしてもわかりません。 10×10のセルのテーブルとした時に、 1. 全体の外枠は3pxの太さ。 2. 内側の縦線はすべて1px。 3. 3行おきに、セルの下部分の太さを2pxにしたい。(3行おきに区切り線を表示したい) もし無理であれば、全体の外枠と3行おきのセル下部分の太さが同じ(2px)でもよいです。 どなたかご返答よろしくお願いいたします。

質問者が選んだベストアンサー

  • ベストアンサー
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

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>

hhdd
質問者

お礼

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

その他の回答 (1)

回答No.2

行の編集をしても勝手に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> 論理的にはあまり美しくないけど。

hhdd
質問者

お礼

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

関連するQ&A

専門家に質問してみよう