tr要素にborder-bottomを引く方法

今回はCSSに関する記事です。

HTMLの表の行を定義するtr要素についてです。

軽くおさらいすると、HTMLで表を作成するには、

<table>
    <tr>
      <th>名前</th>
      <th>年齢</th>
    </tr>
    <tr>
      <td>田中</td>
      <td>22</td>
    </tr>
    <tr>
      <td>佐藤</td>
      <td>41</td>
    </tr>
</table>

このコードで以下のような表を作成できます。

tr要素は表の行を定義し、th要素が見出しセル、td要素がデータセルを定義します。

このtr要素に下線を引きたい場合やデザインを変えたい時

tr{
border-bottom:1px #eee dashed;
}

これで下線が点線になると思ってたのですが、不十分なんです。

table要素のborder-collapseプロパティを変更してください。

table{
border-collapse:collapse
}

CSS2.1の仕様では、table要素のborder-collapseプロパティがcollapseの場合のみ、tr要素のborderプロパティが有効なようです。（border-collapseプロパティのデフォルトはseparate。）

皆さんもお気を付けください。