html - 最大高度不适用于 table

Question

在我的网站上，在某些页面上，有一个框表，其中列出了一些信息。如果要显示 6 个元素，则包含信息的表格单元格应该有一个滚动条 - 单元格不应展开。

所以，我有以下布局:

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

但是，不幸的是，这会导致一个更大的盒子，它会随着每个新元素的添加而不断拉伸(stretch)。如果它有足够的元素。 (更新完成后，我将使用 CSS 和 overflow-y:auto，但为了更好的测试目的，我将按照显示的方式使用)。

我最初也尝试过只用一个外部表，但是布局比我在这里显示的稍微复杂，所以单个外部表没有按需要显示。

但我需要知道如何使最大高度阻止 <tr> , <td> , 或 <table>来自拉伸(stretch)。

非常感谢任何帮助。

Answer 1

我添加了一个 <div > 里面最外层 <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