अधिकतम ऊंचाई ऊंचाई पर काम नहीं कर रही है

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> 

लेकिन, इस, दुर्भाग्य से, एक बॉक्स बड़ा है कि प्रत्येक नए आइटम के लिए खींच रहता है में परिणाम गयी। अगर इसमें पर्याप्त वस्तुएं हैं। (जब अद्यतन पूरा हो जाता है, तो मैं सीएसएस, और overflow-y:auto का उपयोग करूंगा, लेकिन जैसा कि मैंने बेहतर परीक्षण उद्देश्यों के लिए प्रदर्शित किया है) का उपयोग कर रहा हूं।

और मैंने मूल रूप से केवल एक बाहरी तालिका के साथ प्रयास किया था, लेकिन लेआउट थोड़ा अधिक जटिल है जो मैंने यहां प्रदर्शित किया है, इसलिए एकल बाहरी तालिका आवश्यकतानुसार प्रदर्शित नहीं होती है।

लेकिन मुझे यह जानने की ज़रूरत है कि अधिकतम ऊंचाई को <tr>, <td>, या <table> को खींचने से कैसे रोकें।

किसी भी मदद की बहुत सराहना की जाती है।

Answer 1

मैं सबसे बाहरी <td> अंदर एक <div> कहा:

<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