こんにちは！WEBデザイナーのこたです。
今回はTABLEタグでCSSカスタマイズする方法についてご紹介します。
TABLEタグの基礎はこちらから
セルの幅を均等にする方法
テーブルセルの幅は、そのセルのコンテンツの文字数によって自動的に幅が調整されます。しかし、幅が自動調整したくない場合もあると思います。
その場合、すべてのセルの幅を均等にする方法があります。
table{
border-collapse: collapse;
width: 100%;
table-layout: fixed;
}テーブル全体の背景を設定する方法
テーブルにも背景画像や背景色を設定することができます。
<table>タグに適用されるスタイルにbackgroundプロパティを追加します。
table{
background: #333;
color:#fff;
}見出し行にだけ背景色を設定する方法
テーブルのCSSでおすすめなのは見出し行に背景色を設定することです。
見た目の変化やテーブルが見やすくなるためおすすめです。
<th>や<td>に対してではなく、<tr>にCSSを適用します。または、<thead>、<tbody>、<tfoot>を使用している場合は、それらにCSSを適用しても大丈夫です。
thead{
background:#333;
}テーブルの背景色を奇数行と偶数行で塗り分ける方法
奇数行と偶数行で交互に色を変えて、しましまのテーブルを作るときに使用します。
「:nth-child(n)」セレクタを使って、テーブル行を交互に塗り分けます。非常に使われるテクニックになります。
特に列数が多いテーブルに用いるとユーザーが読みやすくなって効果的です。
tbody tr:nth-child(2n){
background: #333;
}ちなみに「:nth-child(n)」セレクタは「○番目の要素を選択する」というセレクタです。（）の中には数字、もしくは簡単な数式で、何番目の要素が選択されるかが決まります。
マウスが重なった行の背景色を変更したい場合
どの行を見ているのかがわかりやすくしたいときに使用する方法です。
テーブルのセルにマウスポインタがホバーした時だけ、その行の背景色を変更します。
こちらも行数、列数の多いテーブルを少しでも読みやすくするのに効果的です。
tr:hover{
cursor: default;
background: #333;
}テーブルでテキストが折り返さないようにしたい場合
テーブルの全体の幅が狭い時でもテキストを改行させたくないセルがあるときは、そのセルに「white-space: nowap;」を適用します。
