Q&A
###実現したいこと
以下の２つを満たすような外見の表を作成したいです。
①tdの大きさが常に一定（たとえば100px）
②tableの横幅をtdに応じて自動伸縮する（たとえば100px幅のtdが10個あるならばtableの横幅は1000px）
###問題症状
①ウィンドウの幅を小さくしたときに、tdの幅が自動で狭くなってしまう（→ウィンドウの大きさに関わらずtdを常に一定の大きさにしたい）
②ウィンドウの幅を小さくしたときに、tableの幅が自動でウィンドウに対して100%になってしまう（→ウィンドウの大きさに関わらずtableを常にtdのサイズに従わせたい。tdの幅×個数が多いときにはtableは横に際限なく伸びていってほしい）
###サンプルコード
HTML
1<head> 2<style> 3td{ 4 width:100px; 5} 6</style> 7 8</head> 9<body> 10 <table><tr><td>A</td><td>A</td><td>A</td><td>A</td><td>A</td><td>A</td><td>A</td><td>A</td><td>A</td><td>A</td></tr></table> 11</body> 12</html>
よろしくお願いします。
回答3件
0
CSS
1table { 2 width:auto; 3} 4 5table td { 6 min-width:100px; 7}
で、いけませんか？
投稿2017/07/06 19:10
総合スコア1084
0
ベストアンサー
table-layoutで調整しますが、tableのwidthに適当な値をいれないと
適用されない場合があるので、小さい数字をいれておきます
（どうせtdの幅より小さくはなりませんので0にしておきました）
CSS
1table{ 2 width:0px; 3 border-collapse: collapse; 4 table-layout: fixed; 5} 6td{ 7 width:100px; 8 border:solid 1px #000000; 9} 10
投稿2017/07/07 00:33
総合スコア114784
0
table { table-layout: fixed; }
を追記してください。
投稿2017/07/07 00:09
総合スコア353
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。