Div not scrolling horizontally

**jaku** · Dec 7, 2010 22:33

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.

<div style="width:750px;height:400px;overflow:auto;">
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<th style="width:60px"> </th>
<th style="text-align:center;width:100px;">P1</th>
<th style="text-align:center;width:100px;">P2</th>
<th style="text-align:center;width:100px;">P3</th>
<th style="text-align:center;width:100px;">P4</th>
<th style="text-align:center;width:100px;">P5</th>
<th style="text-align:center;width:100px;">P6</th>
<th style="text-align:center;width:100px;">P7</th>
<th style="text-align:center;width:100px;"> </th>
<th style="text-align:center;width:100px;"> </th>
<th style="text-align:center;width:100px;"> </th>
</tr>
<tr>
<th> </th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>

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

**Kalon** · Dec 7, 2010 22:58

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

Code:

 
 
<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** · Dec 7, 2010 23:06

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?

**Kalon** · Dec 7, 2010 23:19

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.

Code:

 
<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** · Dec 7, 2010 23:30

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.

**Kalon** · Dec 7, 2010 23:34

you're welcome

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

**jaku** · Dec 7, 2010 23:42

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** · Dec 8, 2010 00:07

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?

Code HTML4Strict:

<!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** · Dec 8, 2010 00:29

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.

User Tag List

Thread: Div not scrolling horizontally

Thread Tools

Display

Div not scrolling horizontally

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions