固定ページの表作成でサイズを調整したいです。

こんにちは、

苦労して、サイト構築中の様子ですが、ちょっと心配なことがあるので、書き込みをさせていただきます。

見た感じ、ブロックエディタを使ってテーブルを作成しているようですね。

今作成しているテーブル要素は、多分次のメジャーバージョンでは、HTMLの構造が変わるので、今の苦労が、先々、水の泡になるかもしれません。

ブロックエディタを使う場合は、gutenbergプラグインを併用しておいた方がいいと思います。

gutenberg　なしのブロックエディタのテーブルブロックのHTML構造

<table class="wp-block-table">
	<tbody>
		<tr>
			<td>hello</td>
			<td>world</td>
		</tr>
		<tr>
			<td>hello</td>
			<td>world</td>
		</tr>
	</tbody>
</table>

gutenberg　あり(ver6.4)のブロックエディタのテーブルブロックのHTML構造

<figure class="wp-block-table">
	<table class="">
		<tbody>
			<tr>
				<td>hello</td>
				<td>world</td>
			</tr>
			<tr>
				<td>hello</td>
				<td>world</td>
			</tr>
		</tbody>
	</table>
</figure>

固定幅、と自動幅のテーブルサイズが異なるのは、固定幅の場合だけwidth:100%;の指定があるためだと思います。共通の幅を指定すればいいと思います。

また、table要素は、max-widthが効かないので、その点注意してください。

• この返信は5年前にnobitaが編集しました。

@ishitaka さん

tableでmax-widthが効くととても素晴らしいことで、古い思い込みしていたのかと思って、私なりに確認してみました。

https://tenman.info/study/css3/table-overflow.php

「そういう事じゃないよ」というのがありましたら、ぜひ教えてください。

table {
    width: 1000px;
    max-width: 100%;
}

この場合は、ブラウザによって挙動が違うようですね。どこを基準にするかの違いでしょうか？

table {
    width: 1000px;
    max-width: 123px;
}

や

table {
    width: 100%;
    max-width: 123px;
}

に関しては、Chrome、Firefox、Safari および Edge で同じように効きますね。

本題に関しては、

table {
    width: 100%;
    max-width: 123px;
    display: block; /* 仕様ではインライン以外とのことなので、念の為に。 */
}

こんな感じで出来るのではないでしょうか。

• この返信は5年前にishitakaが編集しました。

@nobita さん

white-space: pre; ですかね。外してみてください。

@megumitoshioka さん

max-width では、うまくいかない場合がある（white-space など）ようです。
今回は、プラグインで対応したということなので、問題が解決されたら「解決済み」にしてください。

@megumitoshioka さん

max-widthの件で、横道の議論を作ってしまってごめんなさいね。
解決おめでとうございます。

@ishitaka さん

white-space: pre; ですかね。外してみてください。

外しても、同じです。CSSに説明書いておいたので、white-space: pre; をセットした意味は理解していただけると思っていたのですが、残念です。

また、いろいろと教えてさいね。