概要へ移動

このページで解説するコードの実行結果。（タイトルの文字列をクリックすると、コードに移動）

列幅の自動調整あり
竜馬がゆく
司馬遼太郎 著 		竜馬は、議論しない。 議論などは、よほど重要なときでないかぎり、してはならぬ、と自分にいいきかせている。
もし議論にかったとせよ。相手の名誉をうばっただけのことである。 通常、人間は議論に負けても自分の所論や生き方は変えぬ生き物だし、 負けたあと、持つのは、負けた恨みだけである。
列幅の自動調整なし（均等な幅）
竜馬がゆく
司馬遼太郎 著 		竜馬は、議論しない。 議論などは、よほど重要なときでないかぎり、してはならぬ、と自分にいいきかせている。
もし議論にかったとせよ。相手の名誉をうばっただけのことである。 通常、人間は議論に負けても自分の所論や生き方は変えぬ生き物だし、 負けたあと、持つのは、負けた恨みだけである。
デフォルト HTML & CSS

このページでは、以下のコードをデフォルトとして使用している。

CSS : デフォルトCSS
table {

    width:      30em;               /*  幅  */

}



td {

    border:     4px solid blue;     /*  境界線  */

    padding:    10px;               /*  内側の余白  */

}
HTML : 適用するHTML
<table class="sample">

    <tr>

        <td>

            竜馬がゆく  <br>

            司馬遼太郎 著

        </td>

        <td>

            竜馬は、議論しない。

            議論などは、よほど重要なときでないかぎり、してはならぬ、と自分にいいきかせている。<br>

            もし議論にかったとせよ。相手の名誉をうばっただけのことである。

            通常、人間は議論に負けても自分の所論や生き方は変えぬ生き物だし、

            負けたあと、持つのは、負けた恨みだけである。

        </td>

    </tr>

</table>
実行結果
竜馬がゆく
司馬遼太郎 著 		竜馬は、議論しない。 議論などは、よほど重要なときでないかぎり、してはならぬ、と自分にいいきかせている。
もし議論にかったとせよ。相手の名誉をうばっただけのことである。 通常、人間は議論に負けても自分の所論や生き方は変えぬ生き物だし、 負けたあと、持つのは、負けた恨みだけである。

table-layoutの概要

<table>要素の列の横幅を自動調整するか否か。

（表） table-layoutの設定値
設定値列幅の自動調整デフォルト
autoする○
fixedしない（均等な幅）

auto

テーブルのセルの内容により、自動的に列幅を調整する。

CSS : autoに設定
.sample  {

    table-layout:   auto;

}
実行結果
竜馬がゆく
司馬遼太郎 著 		竜馬は、議論しない。 議論などは、よほど重要なときでないかぎり、してはならぬ、と自分にいいきかせている。
もし議論にかったとせよ。相手の名誉をうばっただけのことである。 通常、人間は議論に負けても自分の所論や生き方は変えぬ生き物だし、 負けたあと、持つのは、負けた恨みだけである。

なお、デフォルト値がautoなので、このプロパティを無指定でも自動調整される。

CSS : 無指定
.sample  {

                      

}
実行結果
竜馬がゆく
司馬遼太郎 著 		竜馬は、議論しない。 議論などは、よほど重要なときでないかぎり、してはならぬ、と自分にいいきかせている。
もし議論にかったとせよ。相手の名誉をうばっただけのことである。 通常、人間は議論に負けても自分の所論や生き方は変えぬ生き物だし、 負けたあと、持つのは、負けた恨みだけである。

fixed

列幅は均等になる。

CSS : fixedに設定
.sample  {

    table-layout:   fixed;

}
実行結果
竜馬がゆく
司馬遼太郎 著 		竜馬は、議論しない。 議論などは、よほど重要なときでないかぎり、してはならぬ、と自分にいいきかせている。
もし議論にかったとせよ。相手の名誉をうばっただけのことである。 通常、人間は議論に負けても自分の所論や生き方は変えぬ生き物だし、 負けたあと、持つのは、負けた恨みだけである。

改行させたくない文字列

autoの場合、「竜馬がゆく」と「司馬遼太郎 著」の文字列間で改行されている。 これを避けたい場合。

（課題） 特定の文字列間で改行をさけたい
竜馬がゆく
司馬遼太郎 著 		竜馬は、議論しない。 議論などは、よほど重要なときでないかぎり、してはならぬ、と自分にいいきかせている。
もし議論にかったとせよ。相手の名誉をうばっただけのことである。 通常、人間は議論に負けても自分の所論や生き方は変えぬ生き物だし、 負けたあと、持つのは、負けた恨みだけである。

方法１： セルの最小幅を指定する

テーブルのセル要素（<td>）にmin-width（最小幅）を指定する。

CSS : 最小幅の指定
td  {

    min-width:  10em;

}
実行結果
竜馬がゆく
司馬遼太郎 著 		竜馬は、議論しない。 議論などは、よほど重要なときでないかぎり、してはならぬ、と自分にいいきかせている。
もし議論にかったとせよ。相手の名誉をうばっただけのことである。 通常、人間は議論に負けても自分の所論や生き方は変えぬ生き物だし、 負けたあと、持つのは、負けた恨みだけである。

方法２： white-space: nowrap;を適用する

たとえば、文字列間で改行を禁止のクラスnowrapを作って、「竜馬がゆく」と「司馬遼太郎 著」の文字列に適用する。

CSS : 改行禁止のnowrapクラス
.nowrap {

     white-space: nowrap;

}
HTML : 適用するHTML
<table class="sample">

    <tr>

        <td>

            <span class="nowrap">竜馬がゆく</span>  <br>

            <span class="nowrap">司馬遼太郎 著</span>

        </td>

        <td>

            竜馬は、議論しない。

            議論などは、よほど重要なときでないかぎり、してはならぬ、と自分にいいきかせている。<br>

            もし議論にかったとせよ。相手の名誉をうばっただけのことである。

            通常、人間は議論に負けても自分の所論や生き方は変えぬ生き物だし、

            負けたあと、持つのは、負けた恨みだけである。

        </td>

    </tr>

</table>
実行結果
竜馬がゆく
司馬遼太郎 著 		竜馬は、議論しない。 議論などは、よほど重要なときでないかぎり、してはならぬ、と自分にいいきかせている。
もし議論にかったとせよ。相手の名誉をうばっただけのことである。 通常、人間は議論に負けても自分の所論や生き方は変えぬ生き物だし、 負けたあと、持つのは、負けた恨みだけである。

Emmet : tbl

記述Visual Studio Code
tbltable-layout: fixed;