Maksymalna wysokość nie działa na stole

Question

Na mojej stronie, na niektórych stronach znajduje się tabela z polami zawierającymi niektóre informacje. Jeśli istnieje 6 pozycji do wyświetlenia, to komórka tabeli zawierająca informacje powinna mieć pasek przewijania - komórka NIE powinna się rozwijać.

Tak, mam następujący układ:

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

Ale to, niestety, skutkuje większym pudełku, które trzyma rozciągania dla każdego nowego elementu dodał. jeśli ma wystarczająco dużo przedmiotów. (Kiedy aktualizacja zostanie zakończona, użyję CSS i overflow-y:auto, ale używam jak pokazałem dla lepszych celów testowych).

Początkowo wypróbowałem go tylko z jednym zewnętrznym stołem, ale układ jest nieco bardziej skomplikowany niż tutaj, więc pojedynczy zewnętrzny stół nie był wyświetlany w razie potrzeby.

Ale potrzebuję wiedzieć, jak sprawić, aby maksymalna wysokość uniemożliwiała rozciąganie się <tr>, <td> lub .

Każda pomoc jest bardzo doceniana.

Answer 1

dodałem <div> wewnątrz zewnętrznej <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