max-height no funciona en la tabla

Question

En mi sitio, en ciertas páginas, hay una tabla de cuadros que listan cierta información. Si hay, por ejemplo, 6 elementos para mostrar, entonces la celda de la tabla que contiene la información debe tener una barra de desplazamiento: la celda NO debe expandirse.

Por lo tanto, tienen la siguiente distribución:

<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> 

Pero, esto, por desgracia, se traduce en una caja más grande que sigue estiramiento para cada elemento nuevo añadido. si tiene suficientes elementos (cuando se complete la actualización, usaré CSS y overflow-y:auto, pero estoy usando como lo mostré para mejores pruebas).

Y originalmente lo probé con una sola tabla externa, pero el diseño es un poco más complejo que el que he mostrado aquí, por lo que la única tabla externa no se muestra según sea necesario.

Pero lo que necesito es saber cómo sacar el máximo de la altura a prevenir la <tr>, <td> o <table> de estiramiento.

Cualquier ayuda es muy apreciada.

Answer 1

I añadió una <div> dentro de la más externa <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