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

Question

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

I'm using

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

but the resultant HTML page has the table wider than the screen width (a 1440x900 screen) and a scroll bar appear at the bottom of page.

Solution 1

Use the style

width: 95%;

instead. Also, depending on what your intention may be, consider the style

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

for better layout. I'm only guessing here but it seems like a good idea to make the distance between the table and the window edge a fix one. Otherwise the margin will be dynamically changed when you resize.

Solution 2

max-width cannot be applied to the 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/

There are work-arounds to apply a max-width effect, do a google on "css table max-width".

Solution 3

Adding to Konrad Viltersten, I would set the width to 95%, but instead of using a margin left and right of 10px, I would use:

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

This should eliminate any positioning issues when the browser window is resized.