tableにoverflowで横スクロール適当時のtd幅の固定について

Question

下記のCSSでtableに横スクロールが発生させるようにしました。
一部のtdの幅を固定するように、style="width:200px;" を入れたのですが、widhtが効いてくれません。

対象方法はあるのでしょうか？回答よろしくお願いします。

table{
	width: 100%;
}
.scroll-area{
	max-width: 400px;
}
.scroll-area{
	overflow: auto;
	white-space: nowrap;
}
.scroll-area::-webkit-scrollbar{
	height: 12px;
}
.scroll-area::-webkit-scrollbar-track{
	background: #F1F1F1;
}
.scroll-area::-webkit-scrollbar-thumb {
	background: #BCBCBC;
}

<div class="scroll-area">
<table>
<tr>
<td style="width:200px;">サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
</tr>
</table>
</div>

Comments

[yamato_hikawa]

CSSだけでは、どのようなHTMLにどう適用されているかわかりません。
HTMLコードも書いてください。

[makibi5577]

ご指摘ありがとうございます。

Answer 1

table要素にwidth:100%を指定していますが、
それによって親要素のdivの幅の100%分の幅が設定されます。
なので、divのmax-widthに設定された400pxが適用されることになります。

ですが、サンプルのテーブルですと中のテキストの関係で最小幅でも614pxになるので、
テーブルの仕様上、自動的にその幅まで広がります。

中の要素は、614pxの幅の中で基本的に均等に幅を取ります。
今回の場合だと、td要素は最小で66pxの幅が必要な状態です。

その中で、特別に幅が設定されているものがあれば、そこはその幅になるのですが、
特別な値（200px）を適用した際、差し引き414px分の幅では他のtdの横幅分が賄えないので、
無視されています。

長々と説明しましたが、要はtableに設定されている幅が短すぎるということです。
width:100%を width:200% にすると改善が見られました。

CSS設定で幅を%指定する場合、その要素の親の幅を基準にする、という点に注意してください。
ウィンドウ幅ではありません。

Comments

[makibi5577]

間違いが理解できました。丁寧な解説ありがとうございます。

Answer 2

テーブルのwidthを固定にするのはいかがですか。

table{
  width: 960px;
}

Comments

[makibi5577]

回答ありがとうございます。