overflow:scroll; in <td>

Question

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 specs^1,2, I can't see why.

Answer 1

I got something from here!

Andrew Fedoniouk wrote:

This is actually my question: "One technical reason is that the overflow property does not apply to tables." - why? What is this reason?

I'm no expert, but I believe this is just for backward compatibility with legacy table behavior. You can check the "automatic" table layout algorithm in the spec. I'm pretty sure that this layout algorithm is incompatible with the overflow property (or, more accurately, the layout algorithm will never result in the need for any value of overflow except 'visible').

Yep, this is why I am asking. Seems like there are no formal reasons why or should not be scrollable but seems like UA vendors reached some silent agreement in this area. So is the question.

The spec agrees with you with respect to elements. Table cells are supposed to respect overflow, although Mozilla, at least, appears not to do so. I can't answer your question in this instance, although I would still guess the answer is still tied to legacy rendering.

The main thread is here.

Answer 2

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>

Answer 3

Firstly provide desired height to td and then Apply "float: left" property to respective "td" you want scrollbar to appear.