列の色を変えたり、テーブルの幅の固定方法、行の折り返し方、スクロールバーのある表をつくっていきます。
列の色やスタイルを変える
列の色やスタイルを変更するには、列を<colgroup>でグループ化し、クラスを設定することでcssに反映させます。
ふた通りのやり方があります。
- <colgroup>にspan属性を使う。
- <colgroup>と<col＞を使用する。
span属性
span=""のダブルクォーテーションの中で長さを指定します。
デフォルトは１です。
ではさっそくやってみましょう。
列ごとに背景色を設定します。
cssと表のイメージは共通のため、先にそちらを掲載します。
css
table {
width: 600px;
height: 100px;
text-align: center;
border-collapse: collapse;
}
table, th, td {
border: 1px solid;
}
.red {
width: 25%;
background-color: red;
}
.green {
width: 25%;
background-color: #3cb371;
}
.yellow {
width: 25%;
background-color: yellow;
}一列あたりのwidthを25%にすることで均等な列幅になるように設定しています。
テーブルの幅が100%、4列――100/4=25%。
イメージ画像
- <colgroup>にspanを使った書き方
色ごとにredクラス、greenクラス、yellowクラスを設定し、spanで列の長さを指定します。
html
<table>
<colgroup span="2" class="red"></colgroup>
<colgroup span="1" class="green"></colgroup>
<colgroup span="1" class="yellow"></colgroup>
<tr>
<td>りんご</td>
<td>いちご</td>
<td>キウイ</td>
<td>バナナ</td>
</tr>
<tr>
<td>さくらんぼ</td>
<td>ザクロ</td>
<td>梨</td>
<td>洋梨</td>
</tr>
</table>spanで指定した列数と色の列が対応しています。
spanのデフォルト値は1のため省略が可能です。そのため、htmlの3行目は
<colgroup class="green"></colgroup>とすることもできます。4行目も同様です。
- <colgroup>と<col>を使った書き方
<col>に色ごとのクラスを設定し、spanで列数を指定します。
html
<table>
<colgroup>
<col span="2" class="red"></colgroup>
<col class="green"></colgroup>
<col class="yellow"></colgroup>
</colgroup>
<tr>
<td>りんご</td>
<td>いちご</td>
<td>キウイ</td>
<td>バナナ</td>
</tr>
<tr>
<td>さくらんぼ</td>
<td>ザクロ</td>
<td>梨</td>
<td>洋梨</td>
</tr>
</table>コードの4行目と5行目は「span="1"」で省略可能なのでそうしています。
テーブルの幅を固定する
<th>や<td>の内容（コンテンツ）が長い文字列の場合、cssで特に指定しなければ、コンテンツの長さにともなってセルが横に長くなります。
データの数が多い場合や、長い文字列を扱うときには、自分が意図した表にならないことがあります。
以下の画像は長い文字をセルに配置した表です。
赤い枠線はbodyのwidthで、630pxに設定しています。表の幅はそれの100%に設定していますが、どうでしょうか、表の枠がbodyを超えてしまっています。
html
<table>
<thead>
<tr>
<th>10文字</th>
<th>20文字</th>
<th>40文字</th>
</tr>
</thead>
<tbody>
<tr>
<td>aaaaaaaaaa</td>
<td>aaaaaaaaaaaaaaaaaaaa</td>
<td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
</tr>
<tr>
<td>bbbbbbbbbb</td>
<td>bbbbbbbbbbbbbbbbbbbb</td>
<td>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</td>
</tr>
</tbody>
</table>css
body {
width: 630px;
border: 5px solid red;
}
table {
width: 100%;
text-align: center;
border-collapse: collapse;
}
table, th, td {
border: 1px solid;
}table-layout
テーブルを意図通りに設定するには、cssのプロパティ「table-layout」を「fixed」にします。
そうすることで、コンテンツに影響されずにテーブルの幅（またはセルの幅）を設定できます。
table-layoutを変更し、最初の列のセル幅を20%、二番目の列のセル幅を35%、最後を45%に変更してみます。列の幅を設定するのに<colgroup>を使ってもいいのですが、グループ化するほどでもないので、cssの擬似クラスを使ってみます。
追加css
table {
table-layout: fixed;
}
th:nth-child(1) {
width: 20%;
}
th:nth-child(2) {
width: 35%;
}
th:nth-child(3) {
width: 45%;
}th:nth-child(n)
ｎ番目のthにcssを適用させる
表の一行目（今回の場合は見出し）のセル幅を設定しておけば、他の行もそれにならって設定される
イメージ画像
テーブルとセル幅の固定はできました。
しかし、固定化したことで文字があふれてしまいました。
次は長い行を折り返す方法と、設定した幅を超えた場合にスクロールできるように設定してみましょう。
行を折り返す
前提条件として、日本語だと特に設定しなくても長ければ自動で改行されます。アルファベットや数字、英文の場合、間にスペースが入っていればこれも同じように改行されます。
overflow-wrap
長い単語をテーブル内でも折り返しさせるには、cssで「table-layout: fixed」に設定し、改行を制御するプロパティ「overflow-wrap」を「break-word」にします。
html
<table>
<thead>
<tr>
<th>10文字</th>
<th>20文字</th>
<th>40文字</th>
</tr>
</thead>
<tbody>
<tr>
<td>aaaaaaaaaa</td>
<td>bbbbbbbbbbbbbbbbbbbb</td>
<td>ccccccccccccccccccccXddddddddddddddddddd</td>
</tr>
</tbody>
</table>css
table {
width: 630px;
text-align: center;
border-collapse: collapse;
table-layout: fixed;
overflow-wrap: break-word;
}
table, th, td {
border: 1px solid;
}
th:nth-child(1) {
width: 20%;
}
th:nth-child(2) {
width: 35%;
}
th:nth-child(3) {
width: 45%;
}イメージ画像
word-break
「overflow-wrap: break-word;」に動作が似ているものに「word-break: break-all;」があります。一行に収まらない長い単語の場合の動作は同じですが、一行に複数の単語があるときの動作が異なります。
例として<p>What is the meaning of supercalifragilisticexpialidocious?</p>という一文があって、<p>のfont-sizeが20px、widthが200pxだった場合を見てみましょう。
赤い枠線は<p>のborderです。
未設定の場合
overflow-wrap・break-wordの場合
word-break・break-allの場合
overflow-wrapの方は、単語の手前で改行して意味の区切りを保とうとしている事に対し、word-breakの方は行からあふれたところで改行しています。
例えば一行に長い単語や、数字、URLなどの長いアルファベットならば動作は同じになります。
<p>を使って説明しましたが、表でも効果は一緒です。
スクロールバーを設定する
いくつかプロパティを指定します。
テーブルでもスクロール可能にするには、displayプロパティをblockにします。
そして折り返ししないように、white-spaceをnowrapにします。
overflowプロパティをscroll、またはautoにすることで縦と横にスクロールバーを設定します。
縦だけスクロールバーを設定するならoverflow-y、横ならoverflow-xを使います。
overflow、同-x、同-yの値「scroll」は、範囲内に収まった場合でもスクロールバーを表示します。
「auto」は挙動がブラウザに依存し、範囲内に収まらないときにスクロールバーを表示します。
例・overflow:scroll。
縦方向のスクロールバーは機能しないが表示はされている。
3.141592653589793238462643383279502884197169399375105820974944592307816406286208998628
例・overflow:auto。
3.141592653589793238462643383279502884197169399375105820974944592307816406286208998628
では実際に表を作ってみます。
html
<table>
<thead>
<tr>
<th>作者名</th>
<th>作品名</th>
<th>書き出しの一文</th>
</tr>
</thead>
<tbody>
<tr>
<td>芥川龍之介</td>
<td>蜘蛛の糸</td>
<td>ある日の事でございます。</td>
</tr>
<tr>
<td>太宰治</td>
<td>女生徒</td>
<td>あさ、眼をさますときの気持は、面白い。</td>
</tr>
<tr>
<td>夏目漱石</td>
<td>硝子戸の中</td>
<td>硝子戸の中から外を見渡すと、霜除よけをした芭蕉だの、赤い実の結った梅もどきの枝だの、無遠慮に直立した電信柱だのがすぐ眼に着くが、その他にこれと云って数え立てるほどのものはほとんど視線に入って来ない。</td>
</tr>
</tbody>
</table>css
table, th, td {
border: 1px solid;
}
table {
width: 100%;
border-collapse: collapse;
display: block;
white-space: nowrap;
overflow: auto;
}
th {
padding: 5px 10px;
text-align: left;
background-color: rgb(166, 187, 206);
}
td {
padding: 10px;
}
tbody tr:nth-child(odd) {
background-color: skyblue;
}cssの23行目
tbody tr:nth-child(odd)
tbodyの子要素で、奇数番のtrにcssを適用させます。
偶数を指定する場合は(even)とします。
| 作者名 | 作品名 | 書き出しの一文 |
|---|---|---|
| 芥川龍之介 | 蜘蛛の糸 | ある日の事でございます。 |
| 太宰治 | 女生徒 | あさ、眼をさますときの気持は、面白い。 |
| 夏目漱石 | 硝子戸の中 | 硝子戸の中から外を見渡すと、霜除よけをした芭蕉だの、赤い実の結った梅もどきの枝だの、無遠慮に直立した電信柱だのがすぐ眼に着くが、その他にこれと云って数え立てるほどのものはほとんど視線に入って来ない。 |