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>
<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 {
border-collapse: collapse;
}
table tr {
border: 1px solid #000;
}
関連記事
tableなど表(テーブル)をつくるときの要素まとめ【HTML】
border-collapseで表のボーダーの表示形式を指定【CSS】
Leave a Comment