質問: 下記の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; } ``` ``` サンプル サンプル サンプル サンプル サンプル サンプル サンプル サンプル サンプル ```
回答: table要素にwidth:100%を指定していますが、 それによって親要素のdivの幅の100%分の幅が設定されます。 なので、divのmax-widthに設定された400pxが適用されることになります。 ですが、サンプルのテーブルですと中のテキストの関係で最小幅でも614pxになるので、 テーブルの仕様上、自動的にその幅まで広がります。 中の要素は、614pxの幅の中で基本的に均等に幅を取ります。 今回の場合だと、td要素は最小で66pxの幅が必要な状態です。 その中で、特別に幅が設定されているものがあれば、そこはその幅になるのですが、 特別な値(200px)を適用した際、差し引き414px分の幅では他のtdの横幅分が賄えないので、 無視されています。 長々と説明しましたが、要はtableに設定されている幅が短すぎるということです。 width:100%を width:200% にすると改善が見られました。 CSS設定で幅を%指定する場合、その要素の親の幅を基準にする、という点に注意してください。 ウィンドウ幅ではありません。