7

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.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
qazwsx
  • 25,536
  • 30
  • 72
  • 106
  • Could you post a fiddle, please? I can make some adjustments then, and post an update to it. Otherwise, I'm unsure how you have your elements set-up with nesting and such, which might change the way you need to do this for the specific table. – Troy Alford Oct 25 '12 at 17:06

3 Answers3

7

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.

Konrad Viltersten
  • 36,151
  • 76
  • 250
  • 438
  • Tried this and it still doesn't work, meaning the table still extends wider than the screen and a scroll bar appears at the bottom. Does this depend on the cleaness of the cell content? – qazwsx Jul 17 '12 at 21:14
  • 1
    Open a new project and put in a table. Does it get too wide still? If so, you've got some issues. Most likely, it will display correctly. Then, by adding each component at a time (or few, so you don't go insane), you can track where the error occurs. Alternatively, you can copy your project and strip it down until the error disappears. Please get back to us when you've found the smoking gun. My guess is that a style gets inherited unknowingly. (I ALWAYS make that guess when CSS'ing). – Konrad Viltersten Jul 18 '12 at 00:21
  • It seems to be caused by the presence of cell styled as `tr td div.longcell { height:190px; overflow-y:scroll; }`. BUT I don't know how it can be fixed. When the content of `
    ` and `
    ` has a row too wide, the said problem emerges.     – qazwsx Jul 18 '12 at 15:08
  • Do you need "scroll" there? Would it suffice with "hidden"? [More info on overflow-y click here](http://www.w3schools.com/cssref/css3_pr_overflow-y.asp) – Konrad Viltersten Jul 18 '12 at 21:12
  • hidden is not going to work. Viewer needs to see the content of the cell. They can scroll down to see anything not displayed by default. – qazwsx Jul 27 '12 at 14:39
4

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".

Lowkase
  • 5,631
  • 2
  • 30
  • 48
  • The link: http://stackoverflow.com/questions/7028096/max-width-not-working-on-table-for-ie7 – Stano Jul 17 '12 at 20:56
  • I'm using Chrome31 and inspecting your table, this does not limit the table size from above - http://jsfiddle.net/ubershmekel/2wH8S/5/ - note you can scroll sideways. – ubershmekel Jan 06 '14 at 23:07
  • That will happen no matter how you try to limit the td width, even with px. Your test data is unrealistic. If there is data like that, that must be displayed then choosing a different element like a DIV is the better solution. – Lowkase Jan 07 '14 at 00:50
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.

DOCbrand
  • 339
  • 1
  • 6