css div's and tables table cells and scrolling

[Dsiembab]

I have a webpage and in my html the container holds the sidebars and the content2 I have put a 3columnX8row table instead of a million <div>s I was wondering how I could make the data cells scroll vertically in my css intead of a million <div>s. well actually 12 <div>s.
this may look crazy, but I'm just learning

#container { 
                  font-family: Arial, Helvetica, Verdana, Sans-serif;
                  float: right;
                  width: 640px;
                  margin: 0 auto;
}
#sidebar-a {
        float: right;
    width: 120px;
    line-height: 18px;
                border-left: 1px solid #efefef;
}
#sidebar-a .padding, #sidebar-b .padding, #sidebar-c .padding   {
    padding: 0;
}
#sidebar-b, #sidebar-c {
                clear: right;
    float: right;
    width: 120px;
    line-height: 18px;
                border-left: 1px solid #efefef; 
}
#content2 {                               
                         float: left;                      
                         width: 507px;
                         border-left: 1px solid #efefef;
                         border-right: 1px solid #efefef;
                         border-bottom: 1px solid #efefef;
}
#content2 caption {
                      font-size: 24px;
                      font-weight: bold;
                      padding-top: 10px;
                      padding-bottom: 10px;
                      border-bottom: 1px solid #efefef;
}
table {
             height: auto;
             border: collapse;
             width: auto;
}
td {        
             width: 33%;
             text-align: center;
             border: collapse;
             border-left: 1px solid #efefef;
             border-right: 1px solid #efefef;
             border-bottom: 1px solid #efefef;
}

Might look a little nutty Don't need the answer written out just would like to pointed in the right direction, Thanks

[DanceInstructor]

Give the table cell you want to scroll an id, then give it a fixed height, and set overlfow to scroll. Should look something like this:

td#id {
height: 400px;
overflow: scroll;
}

I would also like to coment, that when using div's for layout I rarely use more than 5 or 6. I'm not sure why you think you have to have as many as you believe you do.

[Dsiembab]

Thanks for the reply, appreciate it, I was wondering though if I could set this class to all my td's using the min-height and the max-hieght and the overflow auto? right now my page has 8 <div>s I thought i had to use so many div's for the layout. Thanks again, dave

[Dsiembab]

I bought o'rielly's css definitive guide so I don't have to ask uninformed questions.

[MidiMagic]

Thanks for the reply, appreciate it, I was wondering though if I could set this class to all my td's using the min-height and the max-hieght and the overflow auto? right now my page has 8 <div>s I thought i had to use so many div's for the layout. Thanks again, dave

You certainly can.

Instead of:

td#id

in the above style use:

.scrol

Then use this for the opening td or div tags, like this:

<td class="scrol">

[Dsiembab]

You certainly can.

Instead of:

td#id

in the above style use:

.scrol

Then use this for the opening td or div tags, like this:

<td class="scrol">

Thanks midi So I would put in my style sheet:

.scroll {
max-height: 300px;
min-height: 200px;
overflow: auto;
}

Thanks man appreciate it

[MidiMagic]

That is correct.