Member Avatar for 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

Edited by TrustyTony because: fixed formatting
  • 3 Contributors
  • 6 Replies
  • 206 Views
  • 3 Weeks Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

A practical, robust approach for the scenario described by (a 3x8 table inside #content2) is to make the cell’s inner content the scrollable region instead of trying to force the TD itself to behave like a block. Wrapping each cell’s content in a block-level container isolates height calculations from the table layout, avoids many cross-browser quirks, and makes reuse simple when applying a class (as suggested) or an id (as mentioned).

<td>
  <div class="cellWrap">
    <!-- long cell content -->
  </div>
</td>
.cellWrap {
  max-height: 220px;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  padding: 6px;
  -webkit-overflow-scrolling: touch;
}

table { table-layout: fixed; width: 100%; }

This pattern is preferred because:

  • Applying overflow to a block inside the TD is more predictable than relying on the TD itself (older browsers can be inconsistent).
  • Use max-height so short cells shrink naturally; avoid relying on min-height inside table cells if precise control is required.
  • overflow-y: auto keeps scrollbars vertical only; overflow-x: hidden prevents unwanted horizontal scrollbars.
  • table-layout: fixed plus explicit column widths gives stable column sizing when mixing percentage widths and inner scrolling regions.
  • box-sizing: border-box ensures padding/borders are included in the height calculations.

Troubleshooting notes: if no scrollbar appears, inspect computed heights (devtools), confirm the wrapper actually contains overflowing content (absolutely positioned children do not expand the wrapper), and verify no parent has overflow: hidden. For layout that isn’t tabular data, modern CSS Grid or Flexbox usually reduces complexity and produces more accessible, responsive results than nested tables with multiple scroll panes.

Recommended Answers

All 6 Replies

Member Avatar for 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.

Member Avatar for 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

Member Avatar for Dsiembab

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

Member Avatar for 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">
Member Avatar for 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

Member Avatar for MidiMagic

That is correct.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.