How to limit the width of an HTML table to 95% of the screen width?

Question

How to limit the width of an HTML table to 95% of the screen width?

I use

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

but the resulting HTML page has a table width exceeding the width of the screen (1440x900 screen), and a scroll bar is displayed at the bottom of the page.

Answer 1

Use style

 width: 95%; 

instead of this. Also, depending on your intention, consider a style

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

for a better layout. I can only guess here, but it seems like a good idea to make the distance between the table and the edge of the window corrected. Otherwise, when resizing, the fields will dynamically change.

Answer 2

max-width cannot be applied to a table tag. Use width instead.

 <table> <tr> <td>test</td> </tr> </table>​ table { width:95%; border-collapse:collapse; } td {background:red;} 

http://jsfiddle.net/2wH8S/

To apply the maximum width effect, workarounds are used, google on "css table max-width".

Answer 3

By adding to Konrad Viltersten, I would set the width to 95%, but instead of using the box to the left and right of 10px, I would use:

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

This should fix any positioning problems when resizing the browser window.