Home/ Questions/Q 6330729
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T17:55:27+00:00

I want a scrollable table. To achieve that, I wrap a <table> into a

  • 0

I want a scrollable table. To achieve that, I wrap a <table> into a <div> with a max-height and overflow: auto. In addition, the <div> has display: inline-block to ensure that the div adjusts its width to the underlying 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 100px, vertical scroll bars are added without making the div wider, causing the text to wrap:

Firefox screenshot

In IE it looks “correct”:

IE screenshot

Is there a way to fix this?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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

    So whats happening is BEFORE the scroll bar is rendering, it is setting the width of the table == width of the containing div. So, for conversations sake, lets say the width of the div is 100px and the width of the scroll bar is 10px, and the width of the inner table is 100px. When the browser is trying to render the div, it assumes a total width of 100px. It then goes along its merry way rendering the contents of the div. Then the scroll bar is added and the contents of the div now have a total width of 110px (table + scroll bar) but the width of the div is still 100px. So basically, the browser is trying to render 110px inside a 100px container, causing the wrap that you’re seeing.

    That is why adding a second div, and then giving that div a margin so the scroll bar will fit, works. I gave this a shot in IE8 and it doesn’t add extra space (like I originally thought it would). Its 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 don’t know how to fix that; but that is off topic for this question. I didn’t have time to give IE7 a shot.

    This is a little bit cleaner and also that it works when the content of one of the rows is 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>
    • 0