basilest basilest - 1 month ago 8
CSS Question

How can Firefox shows a scrollbar inside a cell table?

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

Answer

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/

Comments