HTML Tables

[dgregor]

I created my website in a table format and would like only a table cell to scroll, ie. row 3, column 2. Is that possible? I don't want my whole table to scroll, just one column within a row. Thanks

[gohankid77]

You just want one cell, right? Then if you have a stylesheet, add the following lines in:

td {overflow:hidden}
td.scroll {overflow: auto;}

Then, add the class attribute to the cell that you want to scroll and make it say class="scroll".

Explanation:

td.scroll - says for any table cell with the class "scroll", display a scrollbar if there is too much content.

td - says for any table cell without any class or id, do not display a scrollbar, but instead clip the content to fit the cell.

For more information and a tutorial on CSS (Cascading Style Sheets), go to http://www.w3schools.com/css/default.asp.

[PeOfEo]

Originally posted by gohankid77
You just want one cell, right? Then if you have a stylesheet, add the following lines in:

td {overflow:hidden}
td.scroll {overflow: auto;}

Then, add the class attribute to the cell that you want to scroll and make it say class="scroll".

Explanation:

td.scroll - says for any table cell with the class "scroll", display a scrollbar if there is too much content.

td - says for any table cell without any class or id, do not display a scrollbar, but instead clip the content to fit the cell.

For more information and a tutorial on CSS (Cascading Style Sheets), go to http://www.w3schools.com/css/default.asp. This will not work because of the nature of a cell. Table cells are design to stretch so the overflow attribute, atleast set to auto will just tell the cell to act like normal and stretch its self. Hidden should work, but I think if you use overflow:auto; the cell will still stretch, atleast in ie it probably will stretch. You have to put a div inside of a table cell and then use the overflow attribute on that, for example

<style type="text/css">
#scroll {
height:500px;
width:500px;
overflow:auto;
}
</style>
<td>
<div id="scroll">This div will get the scroll bar when the text is bigger then the div</div>
</td>

[gohankid77]

Thanks. I obviously have a LOT to learn about CSS still.

[PeOfEo]

Well thats more of an html thing then css, its just the behavior of a table, infact this is one reason why tables might not be the best for layout (depending on what kind of layout you are makign) because stretching could potentially be a real annoyance.

[dgregor]

Thanks a million. That worked.

[PeOfEo]

no problem