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.

Osteoclasis

Surprisingly, the best answer (IMHO), is the last one. Apply a height to the TD element, and then float it left. This allows for vertical scrolling without adding additional elements to your code as the other answers suggest. – Outshoot

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.

Uhl

Well, it could if you give it a fixed-layout or a width and no-wrap and so on... However, wrapping it into a div works afaik great in every browser, even in IE6. – Paresthesia

Thanks Kirtan, your info is appreciable. So it is an implementation limit, not a spec problem, and I didn't misread or misunderstand. However, what a shame that there is no further discussion about that thread, and it seems to me that this problem would not be fixed on any browser soon. Besides, I delay to accept this answer in the hope of more fresh info about this problem, because I know you StackOverflower are experts of overflow:) – Osteoclasis

Be sure to check out the solution at the very bottom (i.e. set a height and float the td element left). This worked beautifully for me without having to add any additional div elements. – Outshoot

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>

Incontrovertible

I know a <div> wrapper will work, but don't you think what you answered is not what I asked? – Osteoclasis

yes, you are right... I was a little to fast. However, this might be useful for anyone who is looking for a workaround, not the reason. – Paresthesia

the workaround only works for overflow x, however. you cant do div height = 100%.... – Brit

@Shawn: I don't get it, what do you mean? You want some workaround for a td with a height of 100%? – Paresthesia

yea, so if the table say is 500px tall and you want the td to take up as much height as possible – Brit

@ATOzTOA: Did you gave it a try? – Paresthesia

This is the answer for anyone who wants a scrollable <td> element in their table. – Bregma

Per the answer below, apply a height to the TD element and then float it left. This provides for vertical scrolling without having to add additional elements to your code. Worked like a charm for me. – Outshoot

Well this doesn't work, but then it has been over ten years. – Finecut

Answer 3

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

Easy

I was very surprised to see this work, but it provides the EXACT behavior I was looking for. This should be the accepted solution. – Outshoot

Answer 4

<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>

Gallego