chiều cao tối đa không hoạt động trên bảng

Question

Trên trang web của tôi, trên các trang nhất định, có một hộp các hộp liệt kê một số thông tin. Nếu có 6 mục được hiển thị, thì ô bảng chứa thông tin sẽ có thanh cuộn - ô KHÔNG được mở rộng.

Vì vậy, tôi có bố trí như sau:

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

Nhưng, này, thật không may, kết quả trong một hộp lớn mà giữ kéo dài cho từng hạng mục mới được bổ sung. nếu nó có đủ vật phẩm. (khi cập nhật hoàn tất, tôi sẽ sử dụng CSS và overflow-y:auto, nhưng đang sử dụng như tôi được hiển thị cho mục đích thử nghiệm tốt hơn).

Và ban đầu tôi đã thử nó chỉ với một bảng bên ngoài, nhưng bố cục hơi phức tạp hơn tôi đã hiển thị ở đây, vì vậy bảng bên ngoài không hiển thị khi cần.

Nhưng những gì tôi cần là biết cách làm cho chiều cao tối đa ngăn chặn các số <tr>, <td> hoặc <table> kéo dài.

Bất kỳ trợ giúp nào được đánh giá cao.

Answer 1

Tôi đã thêm một <div> bên trong ngoài cùng <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