Div not scrolling horizontally

jaku · December 8, 2010, 4:33am

Hi,

I have a table in which the number of columns can vary dynamically. If the the number of columns exceed a particular limit, I want the table to scroll horizontally. I have wrapped this table inside a div having a fixed width and overflow set to auto. But if I increase the number of columns, this div doesn’t produce horizontal scroll. Instead the table is confining itself to the div by adjusting its column widths. (For convenience I have used inline styles).

Please check the sample code below.

While checking the code above we can see that the div’s width is only 750px, but the table’s width is more than 1000px. I expected a horizontal scroll in the div. But it’s not happening. Instead this table adjusts itself to the width of the div and no horizontal scroll takes place. Please help

system · December 8, 2010, 4:58am

in this demo, the div containing the table scrolls horizontally.

 
 
<html>
    <head>
        <title></title>
        <style type="text/css">
            div {
                width: 500px;
                overflow: auto
            }
            table {
                width: 100%
            }
        </style>
    </head>
    <body>
        <div>
            <table>
                <tr>
                    <td>aaaaaaaaaaaaaa</td>
                    <td>ssssssssssss</td>
                    <td>cccccccccccccccc</td>
                    <td>dddddddddddddd</td>
                    <td>rrrrrrrrrrrr</td>
                    <td>ggggggggggggggg</td>
                    <td>hhhhhhhhhhhhhhhhhh</td>
                    <td>qqqqqqqqqqqqqqq</td>
                    <td>mmmmmmmmmmmmmmmm</td>
                    <td>xxxxxxxxxxxxxxx</td>
                </tr>
                <tr>
                    <td>aaaaaaaaaaaaaa</td>
                    <td>ssssssssssss</td>
                    <td>cccccccccccccccc</td>
                    <td>dddddddddddddd</td>
                    <td>rrrrrrrrrrrr</td>
                    <td>ggggggggggggggg</td>
                    <td>hhhhhhhhhhhhhhhhhh</td>
                    <td>qqqqqqqqqqqqqqq</td>
                    <td>mmmmmmmmmmmmmmmm</td>
                    <td>xxxxxxxxxxxxxxx</td>
                </tr>
            </table>
        </div>
    </body>
</html>

jaku · December 8, 2010, 5:06am

Hi,

Thanks for the reply. Here I notice that the table is given 100% width. But in my case I want to fix the width of the cell. So the table should get the total width from these cell widths. Is it possible?

system · December 8, 2010, 5:19am

rayzur and paulo’b are the resident css experts and so maybe they can give a better way of doing it.

what I normally do in that case is put the contents of each td in a div and give the div a width as per demo below.

This table now has constant cell widths and scrolls horizontally. without the divs the td’s still resize themselves to some extent depending on their content.

 
<html>
    <head>
        <title></title>
        <style type="text/css">
            div {
                width: 500px;
                overflow: auto
            }
            table td div {
                width: 100px;
                border: 1px solid red
            }
        </style>
    </head>
    <body>
        <div>
            <table>
                <tr>
                    <td><div>aa</div></td>
                    <td><div>bb</div></td>
                    <td><div>vv</div></td>
                    <td><div>nn</div></td>
                    <td><div>kk</div></td>
                    <td><div>rr</div></td>
                    <td><div>jj</div></td>
                    <td><div>aa</div></td>
                </tr>
                <tr>
                    <td><div>aa</div></td>
                    <td><div>bb</div></td>
                    <td><div>vv</div></td>
                    <td><div>nn</div></td>
                    <td><div>kk</div></td>
                    <td><div>rr</div></td>
                    <td><div>jj</div></td>
                    <td><div>aa</div></td>
                </tr>
            </table>
        </div>
    </body>
</html>

jaku · December 8, 2010, 5:30am

Your code is working fine. I will try to implement the same in my case. Will contact you for any further help. Thanks for the time being.

system · December 8, 2010, 5:34am

you’re welcome

if you would like more help, just post back in this thread.

jaku · December 8, 2010, 5:42am

Hi Kalon,

Thanks for your help. I gave the width to the div as you suggested. Now working fine. But still wondering why the widths given to td is not implemented correctly. Any way this will do for the time being.

Rayzur · December 8, 2010, 6:07am

But still wondering why the widths given to td is not implemented correctly.

Hi,
In order for your table cells to take the fixed widths regardless of their content you need to be in table-layout:fixed; mode on the table.

Is this what you are wanting to do?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test page</title>

<style type="text/css">
div {
    width:750px;
    height:400px;
    overflow:auto;
    background:#CCC;
}
table {
    width:100%;
    table-layout:fixed;
}
th,td {
    width:150px;
}
</style>

</head>
<body>

<div>
    <table border="1" cellspacing="0" cellpadding="0">
        <tr>
            <th>P1 long text</th>
            <th>P2 long text</th>
            <th>P3</th>
            <th>P4</th>
            <th>P5</th>
            <th>P6</th>
            <th>P7 long text string that wraps</th>
            <th>&nbsp;</th>
            <th>&nbsp;</th>
            <th>&nbsp;</th>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </table>
</div>

</body>
</html>

jaku · December 8, 2010, 6:29am

Hi Rayzur,

Thanks for the reply. This was the exact thing I was looking for. Will implement the same. Kalon mentioned about you earlier. Nice meeting you. Its great the people from different parts of the world communicate and solve problems together.