概要へ移動

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

竜馬がゆく
司馬遼太郎 著
竜馬は、議論しない。 議論などは、よほど重要なときでないかぎり、してはならぬ、と自分にいいきかせている。
もし議論にかったとせよ。相手の名誉をうばっただけのことである。 通常、人間は議論に負けても自分の所論や生き方は変えぬ生き物だし、 負けたあと、持つのは、負けた恨みだけである。
竜馬がゆく
司馬遼太郎 著
竜馬は、議論しない。 議論などは、よほど重要なときでないかぎり、してはならぬ、と自分にいいきかせている。
もし議論にかったとせよ。相手の名誉をうばっただけのことである。 通常、人間は議論に負けても自分の所論や生き方は変えぬ生き物だし、 負けたあと、持つのは、負けた恨みだけである。
デフォルト 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の場合、「竜馬がゆく」と「司馬遼太郎 著」の文字列間で改行されている。 これを避けたい場合。

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

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