How to control overflow of table cell in Firefox?

css, firefox, html, html-table

Solution

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

Problem

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; } ```

Original source