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>
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.
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.
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:)
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.