max-height not working on table

Question

On my site, on certain pages, there is a table of boxes that list some info. If there are say 6 items to be displayed, then the table cell containing the info should have a scrollbar - the cell should NOT expand.

So, I have the following layout:

<table style="overflow-y:scroll"> //this contains multiple boxes for different topics
    <tr style="overflow-y:scroll;max-height:200px;"> //this contains one topic of info
       <td style="overflow-y:scroll;max-height:200px;"> //This contains one topic of info
           <table style="overflow-y:scroll;max-height:200px;"> //contains one topic with several items
              <tr><td>OneItem</td></tr>
              <tr><td>AnotherItem</td></tr> (and say, this goes on for 10 items)
           </table>
       </td>
    </tr>
  //the outermost <tr> would repeat itself here, say 5 times for each of a few different topics.
</table>

But, this, unfortunately, results in a box larger that keeps stretching for each new item added. if it has enough items. (when update is complete, I will use CSS, and overflow-y:auto, but am using as I displayed for better test purposes).

And I did originally try it with only one outer table, but the layout is slightly more complex than I've displayed here, so the single outer table didn't display as needed.

But what I need is to know how to make the max-height prevent the <tr>,<td>, or <table> from stretching.

Any help is greatly appreciated.

Answer 1

I added a <div> inside the outermost <td>:

<table> //this contains multiple boxes for different topics
    <tr> //this contains one topic of info
       <td> //This contains one topic of info
         <div style="overflow-y:scroll;max-height:200px;">
           <table> //contains one topic with several items