How to show scroll bar in <td> tag?

I tried to use this to display scrollbar in both the vertical and horizontal direction.

But it will be always expand the length and not displaying the scroll bar in the horizontal direction.

How to show scrollbar in the table and <td>?

 

I'm not sure overflow: auto works with % widths... you need a more set unit, or, max-width/height would also work, also so long as they're not %.

Second, I've heard (I need to check this out) that it doesn't work at all in tables in IE.

You might need to throw a non-table element in there (like a div), give it explicit (not %) width, and put overflow on that. But try a non% width first.

 

Yes, it works in div, but not <td>. I tried to insert a div with auto overflow into a table, but still not working, it will expand the table instead.

 

Your css may also need to force a set width for the whole table:

table {
table-layout: fixed;
}

this also happens to help older slower browsers render faster because they don't have to calculate everything on the fly.

However you will indeed get a rigid table.

 

Do you mean we shall code like this:

What do you mean by "rigid table"?

 

table {display:block}

 

If you just make some J Random Table on a web page, and make your browser larger and smaller, the table should accordion (shrink and grow width-wise). If you set a width, this helps, however if the content inside the table is wider than your set width, then the table is required by the specs to contain it (rather than letting the content overflow out or any of the other things content can normally do in regular boxes).

Also, browsers don't know the width of columns without first looking at how wide the content inside them is, and has to look at every row while it decides. You can't
table col {
width;
}

there's no such thing.* Usually I can be happy setting a width for the th since those are at the top of the table, but IE7 doesn't always work with that on the last column. Anyway, if you set table-layout to "fixed" then you can really save the browser a lot of time: it will look at the first row, see how much content is in each cell, determine the widths for each column, then then can just make the rest of the table, if I understand correctly: it doesn't have to keep checking the widths of stuff for each row afterwards. Which can be awesome.

I might have some of this wrong, as I don't use fixed table layouts in my tables much.

Only if you need to write your CSS styles inline like that. A separate stylesheet is better. However what you posted above should do the same thing.

I was going to dismiss this out of hand, because tables are already blocks, but they are specifically blocks who are rendered as display: table (which you can do with non-tables, except in IE).

I've never tried it, but I wonder if you can force a table to be display: block instead of display: table? Display: block on static non-table blocks certainly does what you want with overflow!
Either it doesn't work, or it's a strange philosophical question : )

*well, there is a col but it doesn't work in Mozilla so nobody uses it. And it's CSS2 : (

 

Stomme pose, I tried to use display:block, but it's working in Firefox, not in IE.

 

Oh well, you tried it. That's more than I did : ) And Firefox might be doing it wrong, I'm not familiar enough with the specs to know what should happen if you try to stop a table from acting like a table.

What did table-layout: fixed and a width on the td do for you? No go?

You might need to post this question in another forum or two where there are more table users, or people who know more about manipulating tables with CSS. You've been very patient.

 

Tried table-layout:fixed, still not working in IE. Tried to set the attribute in eiter <table> or <td>, both are not working.

 

TD's by definition grow to their content and CANNOT have scrollbars, it's why some people started using them for formatting in the first place - and why it's still easier to do 100% min-height without hacks working all the way back to IE 5.0 using a table - You want scrollbars you'll need to put a DIV around the content of that TD and handle it there.

Though given you said "Some long texts here" are you sure that's tabular data and that you should even be using a table in the first place? Could we see a sample of the data in question - say three or four rows and the appropriate opening tags and any headers?