How can Firefox shows a scrollbar inside a cell table?

Question

Here it is the most minimal code that still highlights the Firefox behavior (In Chrome and IE the scrollbar is shown as expected)

<html>
<body>
<table style="width:100%; height:100%;">
   <tbody>
       <tr>
           <td           style=" width: 75%;  height: 100%; vertical-align: top; background-color: #FFE4C4;">
               <div      style=" width: 100%; height: 100%; overflow: auto;">
                    <div> 1   __________________  line </div>
                    <div> 1   __________________  line </div>
                    <div> 1   __________________  line </div>
                    <div> 1   __________________  line </div>
                    <div> 1   __________________  line </div>
                    <div> 1   __________________  line </div>
                    <div> 1   __________________  line </div>
                    <div> 1   __________________  line </div>
                    <div> 1   __________________  line </div>
                    <div> 1   __________________  line </div>
                    <div> 1   __________________  line </div>
                    <div> 1   __________________  line </div>
               </div>
           </td>

           <td style="background-color: #DEB887;"> <div> . </div>   </td>
       </tr>

   </tbody>
</table>
</body>
</html>

Any hint to have it working even in FF ? Many Thanks

If you want to show a scrollbar, even if not needed, use `overflow: scroll;` or `overflow-y: scroll;`. I don’t see why a scrollbar should be there. If Chrome etc. display this with a different font site, you could try `font-size-adjust`. — Sebastian Simon, Oct 12 '16 at 17:12
Thanks @Xufox. To see better why set i.e. `height: 10%;` in the 1st `` and copy-paste that '' 3 or 4 times. then shrink the page in Chrome and FF to see the wierd FF behavior — basilest, Oct 12 '16 at 17:32

score 1 · Accepted Answer · answered Oct 12 '16 at 20:11

The structure you are using is wrong for what you want it to do. Tables and table-cells main functionality is to expand according to content, so it would be for the best if you used a different layout-styling for this, for example a relative parent with 100% height and an absolutely positioned child inside of it with 100% height and overflow:auto.

This said, what you are trying to achieve would be the following:

a) First of all add html, body to height:100% b) Use table-layout:fixed to the table c) Use height:100% to the tr d) Use a display:inline-block div inside the td (this is for ie to work) e) use an absolutely positioned element with overflow:auto on that.

Here is a working fiddle: https://jsfiddle.net/Ls6go1g4/

Thank you very much, it works. Tomorrow I'll try to graft it into the huge legacy code where that structure comes from. Unfortunately I cannot do what I'd like on that code. That is what I got and I must work on. — basilest, Oct 12 '16 at 21:55

How can Firefox shows a scrollbar inside a cell table?

1 Answers1