Home/ Questions/Q 9195919
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T21:44:08+00:00

I have a table and want the first columns to have a vertical scroll

  • 0

I have a table and want the first columns to have a vertical scroll bar. This works in Chrome, IE9, Safari on iPad but not in Firefox? Why not? What am I doing wrong?

HTML:

    <table>
        <tbody>
            <tr>
                <td class="col1">
                    <div class="wrapper">
                        <p>Test</p>
                        <p>Test</p>
                        <p>Test</p>
                        <p>Test</p>
                        <p>Test</p>
                        <p>Test</p>
                        ...
                    </div>
                </td>
                <td class="col2">
                </td>
            </tr>
        </tbody>
    </table>

CSS:

html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}

table {
width: 100%;
height: 100%;
}

table .col1 {
width: 20%;
height: 100%;
}

table .col1>div.wrapper {
width: 100%;
height: 100%;
overflow: auto; 
}

table .col2 {
width: 80%;
height: 100%;
background-color: red;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The issue:

    overflow:scroll; won’t work inside a table.

    If you do the same with a div, then it will work fine.

    See Live Example

    Example:

    HTML

    <div class="col1" >
    <div class="wrapper">
        <p>Test</p>
        <p>Test</p>
        <p>Test</p>
        <p>Test</p>
        <p>Test</p>
    ...
    </div>
</div><div class="col2">
</div>

    More read: http://lists.w3.org/Archives/Public/www-style/2006Mar/0030.html#replies

    Thanks to kirtan

    • 0