Geek Answers Handbook

Table inside div with maximum height

I want a scrollable table. To do this, I end the <table> in the <div> with max-height and overflow: auto . In addition, the <div> has display: inline-block to make sure the div adjusts its width to the base table.

 <html> <head> <title>Test</title> <style type="text/css"> div { max-height: 100px; display: inline-block; overflow: auto; border: 1px solid red; } td { border-bottom: 1px solid black; } </style> </head> <body> <div> <table> <tr><td>bla bla bla bla bla</td></tr> <tr><td>bla bla bla bla bla</td></tr> <tr><td>bla bla bla bla bla</td></tr> <tr><td>bla bla bla bla bla</td></tr> <tr><td>bla bla bla bla bla</td></tr> <tr><td>bla bla bla bla bla</td></tr> <tr><td>bla bla bla bla bla</td></tr> </table> </div> </body> </html>

In most browsers (Firefox, Safari, Chrome) this causes a problem: if the table is longer than 100 pixels, vertical scrollbars are added without increasing the width of the div, causing the text to wrap:

Firefox screenshot

In IE, this looks “right”:

IE screenshot

Is there any way to fix this?

+4
source share
2 answers

http://jsfiddle.net/3VSZE/44/

So what happens before the scrollbar renders, it sets the width of the table == width of the containing div. So, for conversations, let's say the width of the div is 100px and the width of the scrollbar is 10px and the width of the inner table is 100px. When the browser tries to display a div, it assumes a total width of 100 pixels. Then it goes in its own fun way, showing the contents of the div. Then a scrollbar is added, and the content of the div now has a total width of 110 pixels (table + scrollbar), but the width of the div is still 100 pixels. Thus, the browser tries to display 110px inside the 100px container, causing the view you see.

This is why adding a second div, and then providing that div with a margin so that the scrollbar matches, works. I did this in IE8, and it does not add extra space (as I originally thought). It is worth noting that when you do this in compatibility mode, the div takes up the entire width of the page. This happens in my example and with yours. I do not know how to fix it; but this is not a topic for this question. I did not have time to give IE7 a shot.

This is a little cleaner, and also works when the contents of one of the lines are much wider:

http://jsfiddle.net/3VSZE/75/

 <html> <head> <title>Test</title> <style type="text/css"> .a { border: 1px solid red; display: inline-block; } .b { width: 100%; overflow: auto; max-height:100px; margin-right: 18px; } td { border-bottom: 1px solid black; } </style> </head> <body> <div class="a"> <div class="b"> <table> <tr><td>bla bla bla bla bla</td></tr> <tr><td>bla bla bla bla bla</td></tr> <tr><td>bla bla bla bla bla</td></tr> <tr><td>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</td></tr> <tr><td>bla bla bla bla bla</td></tr> <tr><td>bla bla bla bla bla</td></tr> <tr><td>bla bla bla bla bla</td></tr> </table> </div> </div> </body> </html>
+4
source

Use nowrap https://developer.mozilla.org/en/CSS/white-space

Apply it to <td>

0
source

More articles:


All Articles