- ベストアンサー
tableタグの挙動について教えてください
- tableタグの挙動について教えてください。ブラウザ表示（Chrome）では、指定した幅よりも狭く表示されてしまいます。
- tableタグの幅を指定しても、ブラウザ表示では指定した幅よりも少し狭くなります。この現象の原因を知りたいです。
- tableタグの幅を指定しているにもかかわらず、ブラウザ表示では指定した幅よりも狭く表示されています。どうすれば正確な幅で表示できるのでしょうか？
- nekogeruge
- お礼率33% (16/48)
- CSS
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
tableにwidth属性で指定している240pxは、詳細度が0として計算されますから、スタイルシートで.list-box table{ width:100%;}の指定が詳細度(0011)で上書きされます。 tableが含まれるブロックであるbody要素にstyle属性で指定してあるwidth:240pxは詳細度(1000)ですね。 カスケーディングの仕組みは ・出所によるソート ユーザーの最重要宣言＞著者の最重要宣言＞著者＞ユーザー＞ブラウザのスタイルシート ・詳細度によるソート ・出現順番によるソート ですから、指定されていないものを探すと、ブラウザの持つデフォルトのスタイルシートのmargin,paddingが怪しい。 html,body{margin:0;padding:0;} table{margin:1em 0;} 程度を加えることで解決すると思います。 (補足) ★必ず基点となるセレクタを書くようにしましょう。紛らわしくなくなります。 .list-box→div.list-box CSS2以降、基点となるセレクタを書くことになりました。いきなり.からはじめると *.list-boxとみなされます。 ★余計なものは書かないようにしましょう。 class="list-box"は必要ですか？ tableにはsummaryが必須ですから、 <table summary="list"> で table[summary="test"]{・・・} でよいかと ★tableがデザインのためでしたら使用するのは控えましょう。
その他の回答 (1)
- yambejp
- ベストアンサー率51% (3827/7415)
テーブルの横幅を指定しているのにcssで100%設定しているのは意味ありますか？ それを差し引いても幅は240になりそうですが、 あとは table{border-collapse:collapse;} td{border:0px solid;} とか指定してみてはいかがでしょうか？
補足
単純な解答を求めていたのですが、 tableがここまで複雑だとは目がから鱗です！ まだまだ勉強不足な事を痛感させられました＞＜ 大変大変ありがとうございます！！