overflow:scroll; in <td>

an0 picture an0 · Jul 31, 2009 · Viewed 54.1k times · Source

Why does the CSS property overflow:scroll; not work in <td>, while overflow:hidden; works well?

<table border="1" style="table-layout:fixed; width:100px">
  <tr>
    <td style="overflow:scroll; width:50px;">10000000000000000000000000000000000</td>
    <td>200</td>
    <td>300</td>
  </tr>
</table>

From the CSS specs1,2, I can't see why.

Answer

Tim B&#252;the picture Tim Büthe · Jul 31, 2009

You have to wrap it in a div, that will work:

<table border="1" style="table-layout:fixed; width:500px">
  <tr>
    <td style="width:100px;"><div style="overflow:scroll; width:100%">10000000000000000000000000000000000</div></td>
    <td>200</td>
    <td>300</td>
  </tr>
</table>