よろしくお願いします。
htmlでテーブルを使用しての表を作っているのですが、
見やすくするために横線の太さを変えたいと思っています。
基本的なhtmlタグとスタイルシートの書き方は理解できますが、以下のよう作る方法が
どうしてもわかりません。
10×10のセルのテーブルとした時に、
1. 全体の外枠は3pxの太さ。
2. 内側の縦線はすべて1px。
3. 3行おきに、セルの下部分の太さを2pxにしたい。(3行おきに区切り線を表示したい)
もし無理であれば、全体の外枠と3行おきのセル下部分の太さが同じ(2px)でもよいです。
どなたかご返答よろしくお願いいたします。
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>
ありがとうございます、非常に簡潔に出来て感動です。
縦線と横線の個別の指定方法が理解できました。
助かりました、本当にありがとうございました。
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>
論理的にはあまり美しくないけど。
ご返答ありがとうございました。
tbodyをなるほどこんな使い方もできるのかと参考になりました!
今後も参考にさせていただきます。
本当にありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Excel(エクセル) エクセルの数式で教えてください。 1 2023/02/02 10:20
- Excel(エクセル) 列の複数ある空白セルを飛ばして、セルに並べて表示したい 3 2023/02/12 16:49
- Excel(エクセル) エクセルの数式で教えてください。 2 2023/01/12 09:24
- JavaScript HTML&CSS Javascriptによる動的テーブル 1 2023/03/27 19:51
- Access(アクセス) AccessVBAで降順にするテーブル作成クエリを使用して作成したテーブルを削除し同一のテーブル作成 1 2023/01/06 11:17
- 食生活・栄養管理 夫が食べ過ぎ、太り過ぎで困ってます。 独身の頃は一人暮らししてた夫、身長177で体重は70キロでした 5 2023/06/21 19:26
- その他(プログラミング・Web制作) セレクトボックスで選択された値をコントローラーで使用したい 2 2022/07/26 16:41
- その他(悩み相談・人生相談) 裸になることもなく必要な部分だけ出してするセックスってどう思いますか。 例えば、テーブルにもたれかか 6 2022/08/01 12:40
- その他(データベース) Accessフォームからパラメーターで表示したレコードを指定のExcelのセルへ転送する方法について 2 2022/08/22 18:04
- Access(アクセス) Accessテーブルの結合で別々のテーブルのフィールドを組み合わせて値を出す方法について 2 2022/07/20 19:43
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
tableにul,または,olを入れられ...
-
テーブルの行を折りたたみたい...
-
線が一番細いテーブル
-
テーブルの装飾
-
テーブルのセルに画像をピッタ...
-
表の1列だけをCSSを使って右揃...
-
TABLEタグでのpadingについて
-
テーブルが崩れる問題について
-
【HTMLタグ】テーブルを教えて...
-
HTML <td></td>タグ セル内余...
-
Dreamweaverで行間の調整
-
DreamWeaverで複数ワードを一気...
-
テーブルの行の高さを指定する...
-
[table] colspanについて
-
TRタグの余白をcssで設定するには
-
CSSで<td>の背景色を変えたい。
-
画像と画像の間の空白
-
tdなどの閉じタグは省略しても...
-
HTMLセル結合にフォームを組み...
-
作った表を横一列に並べる
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
TRタグの余白をcssで設定するには
-
tableにul,または,olを入れられ...
-
テーブルの任意の列を非表示に...
-
テーブルのヘッダとボディの幅...
-
cssで、表示されるテキストによ...
-
HTML <td></td>タグ セル内余...
-
文字列が入っているtdを削除せ...
-
テーブルのセルに画像をピッタ...
-
テーブルの行を折りたたみたい...
-
テーブルの行の高さを指定する...
-
テーブルの表示がずれます
-
テーブルタグのセルの幅の一部...
-
中に<table></table>が使えるア...
-
逆L字の表(table)組み
-
ホームページ 表の上の余白を...
-
表の中の列の順番を入れ替える...
-
EXCELからhtmlへの変換で罫線が...
-
tableでcolspanを使うと次行以...
-
表の1列だけをCSSを使って右揃...
-
文字の中央そろえを一括で指定...
おすすめ情報