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

なお、見た目のため、このページの実行結果には「下のCSSコードも」適用している。

CSS : デフォルトCSS
table {
    width:      30em;               /*    */
}
td {
    border:     4px solid blue;     /*  境界線  */
    padding:    10px;               /*  内側の余白  */
}

table-layoutの概要

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

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

auto

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

CSS : autoに設定
.sample  {
    table-layout:   auto;
}
HTML : 適用するHTML
<table class="sample">
    <tr>
        <td>
            竜馬がゆく  <br>
            司馬遼太郎 著
        </td>
        <td>
            竜馬は、議論しない。
            議論などは、よほど重要なときでないかぎり、してはならぬ、と自分にいいきかせている。<br>
            もし議論にかったとせよ。相手の名誉をうばっただけのことである。
            通常、人間は議論に負けても自分の所論や生き方は変えぬ生き物だし、
            負けたあと、持つのは、負けた恨みだけである。
        </td>
    </tr>
</table>
実行結果
竜馬がゆく
司馬遼太郎 著
竜馬は、議論しない。 議論などは、よほど重要なときでないかぎり、してはならぬ、と自分にいいきかせている。
もし議論にかったとせよ。相手の名誉をうばっただけのことである。 通常、人間は議論に負けても自分の所論や生き方は変えぬ生き物だし、 負けたあと、持つのは、負けた恨みだけである。

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

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

fixed

列幅は均等になる。

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

改行させたくない文字列

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

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

方法1: セルの最小幅を指定する

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

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

方法2: 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;