Take the 2-minute tour ×

Please see the example. I provided height:150px; overflow:auto; to all <td> tags. On less content the height is working fine. For more content vertical scroll bar need to come. But it is not working here for the table cell.

If I use <div> inside the <td> tag with the style property height:inherit; overflow:auto; means scroll is working.

Any solution or reason is there for the overflowed <td> tag?

Please suggest. Thanks in advance.

share|improve this question
add comment

3 Answers

up vote 1 down vote accepted

Hi now if you change your td display properties than it's work

as like this

display: inline-block;
share|improve this answer
Its not working. –  sureshunivers Sep 21 '12 at 10:35
@sureshunivers it's working now check demo tinkerbin.com/6NQlGRwT –  Rohit Azad Sep 21 '12 at 10:52
Yes, Its working. Thanks. –  sureshunivers Sep 21 '12 at 11:38
is there any possible to center vertically for the minimum content column data(first column). –  sureshunivers Sep 21 '12 at 12:04
add comment

Can be solved by specifying display: block; and float: left; to your TD's style

td { height:150px; overflow:auto; display: block; float: left; }

Demo: http://jsbin.com/ofufuf/1/edit

share|improve this answer
No scroll bar found for second column of the table. –  sureshunivers Sep 21 '12 at 10:33
Its working. Thanks. But better answer getting by applying display:inline-block; only. No need float. –  sureshunivers Sep 21 '12 at 11:49
Yes, using inline-block is a better and cleaner way. :) –  techfoobar Sep 21 '12 at 11:53
add comment

Table tag does not support overflow property directly.

You have to do this the way you were trying i.e you have to insert a div inside a td and then add overflow in that div.

<table> <tr> <td> <div style="height:100px;overflow:auto;">abc</div> </td> </tr> </table>

share|improve this answer
add comment

Your Answer


