tags:

views:

1528

answers:

2

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.

+5  A: 

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>
Tim Büthe
I know a <div> wrapper will work, but don't you think what you answered is not what I asked?
an0
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.
Tim Büthe
You were right, Tim, +1 for that
opensas
+1  A: 

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.

Kirtan
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.
Tim Büthe
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:)
an0