プログラミング

trでborderを使えるようにするにはtableにborder-collapseを指定する【CSS】

CSSでテーブル(表)を組むときに使われるtable要素。table要素以外にもいくつか関係する要素がありますが、その中で表の行を表すtr要素に線を引きたい場合、単にborderを指定しても適用されません。

tableにborder-collapse:collapse;を指定

table要素にborder-collapse:collapse;を指定してあげることで、tr要素にborderが適用され、次のように線が引かれます。

見出し1 内容1
見出し2 内容2
見出し3 内容3
HTML
<table>
<tr>
<th>見出し1</th>
<td>内容1</td>
</tr>
<tr>
<th>見出し2</th>
<td>内容2</td>
</tr>
<tr>
<th>見出し3</th>
<td>内容3</td>
</tr>
</table>
CSS
table {
 border-collapse: collapse;
}
table tr {
 border: 1px solid #000;
}

関連記事
tableなど表(テーブル)をつくるときの要素まとめ【HTML】
border-collapseで表のボーダーの表示形式を指定【CSS】

Leave a Comment