CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのtable-layoutプロパティでテーブルレイアウトを制御する方法

CSSのtable-layoutプロパティは、ブラウザがテーブルの行・列・セルをレイアウトする際に使用するアルゴリズムを定義するためのプロパティです。このプロパティを活用することで、テーブルのレイアウトを細かく制御できるようになります。

構文

CSSのtable-layoutプロパティの構文は以下のとおりです。

セレクタ {
    table-layout: /*値*/
}

table-layoutプロパティに指定できる主な値は次の2つです。

  • auto … ブラウザがセルのコンテンツに応じて列幅を自動的に計算します(デフォルト値)。
  • fixed … テーブルや列に指定された幅が優先され、コンテンツの量に関係なくレイアウトが固定されます。

それでは、実際のコード例を見ていきましょう。

サンプルコード1

次の例では、table-layoutプロパティに「auto」と「fixed」をそれぞれ指定したテーブルの表示の違いを確認できます。

<!DOCTYPE html>
<html>
<head>
<style>
table {
    margin: 2em;
    display: inline-block;
    border: 1px solid black;
}
td {
    border: 1px solid black;
}
#one {
    table-layout: auto;
    width: auto;
}
#one + table {
    table-layout: fixed;
    width: 100px;
}
</style>
</head>
<body>
<h2>CSSにおけるテーブルレイアウトの動作</h2>
<table id="one">
<caption>クリケット選手</caption>
<tr>
<td>ShaneWarne</td>
</tr>
<tr>
<td></td>
<td>Adam</td>
</tr>
<tr>
<td></td>
<td>Shimron Hetmyer</td>
<td></td>
</tr>
</table>
<table>
<caption>クリケット選手</caption>
<tr>
<td>ShaneWarne</td>
</tr>
<tr>
<td></td>
<td>Adam</td>
</tr>
<tr>
<td></td>
<td>Shimron Hetmyer</td>
<td></td>
</tr>
</table>
</body>
</html>

出力結果

上記のコードを実行すると、次のような出力が得られます。

CSSのtable-layoutプロパティでテーブルレイアウトを制御する方法

1つ目のテーブルは「auto」が指定されているため、コンテンツに合わせて列幅が自動調整されます。一方、2つ目のテーブルは「fixed」と幅100pxが指定されているため、コンテンツの長さに関係なくレイアウトが固定されます。

サンプルコード2

続いて、table-layoutプロパティに「fixed」を指定し、テーブル全体の幅を親要素に対して100%に設定した例です。

<!DOCTYPE html>
<html>
<head>
<style>
div {
    margin: auto;
    width: 50%;
    box-shadow: inset 0 0 14px orange;
}
td {
    box-shadow: inset 0 0 5px lime;
    white-space: nowrap;
    outline: thin dotted;
}
table {
    border: 3px solid black;
    table-layout: fixed;
    width: 100%;
}
</style>
</head>
<body>
<div>
<table>
<caption>サンプルキャプション</caption>
<tr>
<td>ABCD</td>
</tr>
<tr>
<td></td>
<td>EFGH</td>
</tr>
<tr>
<td></td>
<td>IJKLM NOPQRST</td>
<td></td>
</tr>
</table>
</div>
</body>
</html>

出力結果

上記のコードを実行すると、次のような出力が得られます。

CSSのtable-layoutプロパティでテーブルレイアウトを制御する方法

このように「fixed」を指定すると、セル内のテキストが長くても列幅は一定に保たれ、レイアウトが崩れにくくなります。特に、テーブル幅を画面サイズに応じて固定したい場合や、描画速度を重視したい場合に「fixed」レイアウトは有効です。

  1. CSSでレスポンシブテーブルを作成する方法をわかりやすく解説

    CSSでレスポンシブ対応のテーブルを作成するには、テーブル全体を<div>要素で囲み、その親要素に overflow-x: auto; を指定するのが最もシンプルで確実な方法です。これにより、画面幅が狭い環境（スマートフォンやタブレットなど）でも、テーブルが横にはみ出すことなく、水平スクロールバーが自動的に表示されるようになります。レスポンシブテーブルのポイントレスポンシブテーブルを実現するうえで重要なCSSプロパティは以下のとおりです。overflow-x: auto; … コンテナからはみ出した内容に対して、必要な場合のみ横スクロールバーを表示します。width: 100%;

  2. 【CSS】Flexboxで作る高度なレイアウト！基本プロパティと実装サンプルを解説

    Flexbox（フレックスボックス）とは？ CSS3には「Flexible Box Layout（フレキシブルボックスレイアウト）」と呼ばれるレイアウトモードが用意されており、一般的にはFlexbox（フレックスボックス）として知られています。Flexboxを活用することで、従来のfloatやpositionを使った手法よりもはるかに簡単かつ柔軟に、複雑なWebアプリケーションやWebページのレイアウトを構築できます。 Flexboxは「フレックスコンテナ」（親要素）と「フレックスアイテム」（子要素）という2つの概念で構成されます。親要素にdisplay: flex;を指定するだけで、その直下