html - HTML テーブルの幅を画面幅の 95% に制限するには?

Question

HTML テーブルの幅を画面幅の 95% に制限するには?

私は使用しています

<style type="text/css">
table {
  max-width:95%;
  border-collapse:collapse;
  ...
}
...

ただし、結果の HTML ページには、画面幅 (1440x900 画面) よりも広いテーブルがあり、ページの下部にスクロール バーが表示されます。

Answer 1

スタイルを使用する

width: 95%;

代わりは。また、あなたの意図に応じて、スタイルを検討してください

width: 100%;
margin-left: 10px;
margin-right: 10px;

より良いレイアウトのために。ここは推測ですが、テーブルと窓の縁の距離を一定にするのが良いようです。そうしないと、サイズ変更時に余白が動的に変更されます。

Answer 2

max-width は table タグには適用できません。代わりに幅を使用してください。

<table>
<tr>
    <td>test</td>
</tr>
</table>​

table {
  width:95%;
  border-collapse:collapse;
}

td {background:red;}

http://jsfiddle.net/2wH8S/

max-width 効果を適用する回避策があります。「css table max-width」でググってください。

Answer 3

Konrad Vilterstenに加えて、幅を95％に設定しますが、10pxの左右のマージンを使用する代わりに、次を使用します。

margin-left: 2.5%;
margin-right: 2.5%;

これにより、ブラウザウィンドウのサイズが変更されたときの位置の問題が解消されます。