altezza massima non funzionante sulla tabella

Question

Sul mio sito, in alcune pagine, c'è una tabella di caselle che elenca alcune informazioni. Se sono presenti 6 elementi da visualizzare, la cella della tabella contenente le informazioni deve avere una barra di scorrimento - la cella NON deve essere espansa.

Così, ho il seguente schema:

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

Ma, questo, purtroppo, si traduce in una scatola più grande che continua che si estende per ogni nuovo elemento aggiunto. se ha abbastanza articoli (Quando l'aggiornamento è completo, userò CSS e overflow-y:auto, ma sto usando come ho visualizzato per migliori test).

E inizialmente l'ho provato con un solo tavolo esterno, ma il layout è leggermente più complesso di quello che ho visualizzato qui, quindi il singolo tavolo esterno non viene visualizzato come necessario.

Ma quello di cui ho bisogno è sapere come fare in modo che l'altezza massima impedisca lo stretching di <tr>, <td> o <table>.

Qualsiasi aiuto è molto apprezzato.

Answer 1

ho aggiunto un <div> all'interno del più esterno <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