CSSを使ってテーブルの幅や見た目をきれいに整える方法

目的
HTML作成
1. tableタグ説明
2. HTML作成
CSSの実装
終わりに

目的

今回はCSSを使ってテーブルの見た目をきれいに表示する方法をご紹介します。

CSSのプロパティを順番に追加していき、変化がわかりやすいように順番にご説明します。

もし特定のプロパティを探している場合は飛んでスキップして読んでください。

以下の順番でご説明します。

枠線を付ける
二重線を消す
横幅を固定する
行の幅を超えた場合でも1行で表示する
はみ出しを非表示にする
はみ出し部分を点々(…)で省略する

また、最終的に作成する画面はこんな感じです。

ではさっそくコードに入っていきます。

HTML作成

tableタグ説明

CSSに入る前にHTMLのtableタグなどの説明を簡単にします。

主に使うのはtableタグ、trタグ、thタグ、tdタグの4つです。

主にそれぞれこういった使い方をします。

table：以下の3つのタグをこのタグで囲むことでテーブルが表示される。
tr：1行を表す。主にthタグやtdタグを囲む。
th：ヘッダーを表す。先頭行や先頭列のセルに使われる。
td：データを表す。thではないセル使うので一番多く使う。

とても簡易的に説明しましたが、まだわからない方はググるかソースを実際に書いてみるとわかりやすいと思います。

詳しくはこちらのサイトがとてもわかりやすかったです。

https://saruwakakun.com/html-css/basic/table

HTML作成

今回はヘッダー付きのデータが1行のテーブルを作成します。

CSSは別のファイルを読み込みますが、この段階では何も書いていません。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>テーブル</title>
    <link rel="stylesheet" href="table-sample.css">
</head>
<body>
    <table class="my-table">
        <tr>
            <th>カラム1</th>
            <th>カラム2</th>
            <th>カラム3</th>
            <th>カラム4</th>
            <th>カラム5</th>
        </tr>
        <tr>
            <td>あいうえお</td>
            <td>かきくけこ</td>
            <td>さしすせそ</td>
            <td>たちつてとなにぬねの</td>
            <td>はひふへほまみむめも</td>
        </tr>
    </table>
</body>
</html>

この段階のソースだとこのように表示されます。

枠線もなくとても見づらいと感じるはずです。HTMLだけではこのような表示になってしまいます。

ではこれをCSSを適応してきれいにしていきます。

なお、HTMLを自分で作成して試してみたい方はこちらをご参考ください。

CSSの実装

事前知識として今回はクラスを設定してCSSを適応します。

セレクタの使い方については以前の記事をご参考にしてください。

枠線を付ける

まずは枠線を付けて区切れをはっきりさせます。

では読み込んでいるtable-sample.cssに書きこんでいきます。

.my-table {
}

.my-table * {
    border: 1px #000 solid;
}

tableタグの中の要素すべてにboderプロパティを適応します。この場合の表示はこうなります。

少し崩れているように見えますが、枠線はつきました。

borderプロパティでは枠線の太さ、色、線の種類などを一気に設定できます。

二重線を消す

次は二重線のようになっているのを直したいと思います。

.my-table {
    border-collapse: collapse;
}

.my-table * {
    border: 1px #000 solid;
}

border-collapseプロパティをテーブル自体に適応します。この場合、

これで二重線が直りました。

border-collapseプロパティはセルの間隔を指定するもので、collapseにすることでセルとセルの隙間がなくなりました。線が重なっているので直ったというわけです。

横幅を固定する

今のままでは文字のサイズや画面サイズによってテーブルの幅が変わってしまうので、テーブルの横幅を固定したいと思います。

.my-table {
    border-collapse: collapse;
    width: 500px;
    table-layout: fixed;
}

.my-table * {
    border: 1px #000 solid;
    width:100px;
}

1列ずつ幅を設定することもできますが、今回は一律100pxにしました。

列の幅を固定するだけではしっかり固定されない場合があるので、テーブル自体の横幅も500pxで固定します。

このときtable-layoutプロパティをfixedに設定しておかないとこのあと崩れてしまうので、忘れやすいですが注意が必要です。

横幅が固定されました。しかし幅より長い文字列は自動で改行されてしまい2行になってしまっています。

行の幅を超えた場合でも1行で表示する

行の幅を超えた場合でも改行しないように設定します。

.my-table {
    border-collapse: collapse;
    width: 500px;
    table-layout: fixed;
}

.my-table * {
    border: 1px #000 solid;
    width:100px;
    white-space: nowrap;
}

white-spaceを設定することで行の折り返しをしないようにします。

カラム4が折り返さないのでセルを突き破ってしまいました。ですが、順調です。

はみ出しを非表示にする

ではセルの幅からはみ出る文字は非表示にしてしまいます。

.my-table {
    border-collapse: collapse;
    width: 500px;
    table-layout: fixed;
}

.my-table * {
    border: 1px #000 solid;
    width:100px;
    white-space: nowrap;
    overflow: hidden;
}

overflowを設定します。overflowはボックスからはみ出た部分の扱いを決めれます。ボックスは今回はセルのことです。

これをhiddenに設定することではみ出た部分は非表示になります。hiddenのほかにスクロール可能にできるので、overflowプロパティはここ以外でもよく使用します。

これでは文字が途中で切れてしまって見栄えが悪いです。もう一工夫しましょう！

はみ出し部分を点々(…)で省略表示する

最後に中途半端にはみ出している文字を…表示にして見栄えをよくしましょう。

.my-table {
    border-collapse: collapse;
    width: 500px;
    table-layout: fixed;
}

.my-table * {
    border: 1px #000 solid;
    width:100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

text-overflowにellipsisを設定するとあふれた文字が…で省略されて表示されます。