29

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.

Improve this question
1
  • 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. Commented Mar 14, 2018 at 21:23

4 Answers 4

Reset to default
32

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>
Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

I know a <div> wrapper will work, but don't you think what you answered is not what I asked?
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.
the workaround only works for overflow x, however. you cant do div height = 100%....
@Shawn: I don't get it, what do you mean? You want some workaround for a td with a height of 100%?
yea, so if the table say is 500px tall and you want the td to take up as much height as possible
|
15

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

Improve this answer

1 Comment

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

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.

Improve this answer

3 Comments

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

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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.