सीएसएस में, मैं एक कंटेनर div भरने के लिए एक टेबल कैसे विस्तार कर सकता हूं?

Question

मैं कई कंटेनर डीआईवी बनाकर स्क्रीन पर रिक्त स्थान "बनाना" चाहता हूं, फिर प्रत्येक डीवी में सामग्री भरें। एक मामले में, मुझे एक टेबल भरना होगा।

तालिका का सबसे निचला हिस्सा जेपीईजी <img> है। मैं कहीं भी निश्चित पिक्सेल आकार का उपयोग नहीं करना चाहता, ताकि सामग्री विभिन्न आकार के ब्राउज़र में अच्छी तरह से कम हो जाए।

बार-बार परीक्षण और त्रुटियों के बाद, और इंटरनेट पर कुछ पढ़ने के बाद, मुझे पता चला कि पूरी श्रृंखला कंटेनर-div ---> तालिका -> tbody -> tr -> td -> img आकार में अच्छी तरह से फिट, मुझे यह सुनिश्चित करना होगा कि इनमें से प्रत्येक तत्व में निम्न गुण "height:100%; width:100; position:relative" हैं (आईएमजी स्थिति स्वयं पूर्ण हो सकती है)।

यह केवल 1 पंक्ति की तालिका के साथ ठीक काम करता है। लेकिन अगर मेरे पास कई पंक्तियां हैं, तो ऐसा लगता है कि पंक्ति की ऊंचाई की गणना उसके माता-पिता से की जाती है, जो कि है, क्योंकि यदि मेरे पास 2 पंक्तियां हैं, तो प्रत्येक पंक्ति अभी भी उतनी ही अधिक है जितनी कि सभी के रूप में। लेकिन जब भी मैं मैन्युअल रूप से टीआर की ऊंचाई को विभाजित करता हूं, यह कंटेनर में बिल्कुल फिट नहीं होता है।

तो मैं तालिका को आसपास के कंटेनर में स्वचालित रूप से कैसे छोटा कर सकता हूं?

<style type="text/css"> 

div { 
border : 2px solid red; 
} 

#bottom-banner { 
height:40%; 
} 

#bottom-banner tbody { 
position:relative; 
height:100%; 
width:100%; 
} 

#bottom-banner tr { 
max-height:100%; 
width:100%; 
position:relative; 
height:100%; 
} 


<style type="text/css"> 

div { 
border : 2px solid red; 
} 

#bottom-banner { 
height:40%; 
} 

#bottom-banner tbody { 
position:relative; 
height:100%; 
width:100%; 
} 

#bottom-banner tr { 
max-height:100%; 
width:100%; 
position:relative; 
height:100%; 
} 
#bottom-banner table { 
position:relative; 
height:100%; 
width:100%; 
} 

#bottom-banner div { 
position:relative; 
height:100%; 
width:100%; 
} 

#bottom-banner img { 
height:100%; 
position:absolute; 
right:0; 
left:0; 
margin:auto; 
top:0; 
bottom:0; 
width:auto; 
} 
</style> 

<div id="bottom-banner"> 

<table><tbody> 
<tr> 
<td > 
<div><img src="11a2.jpg"/></div> 
</td> 
</tr> 

<tr> 
<td > 
<div><img src="11a2.jpg"/></div> 
</td> 
</tr> 

</tbody></table> 
</div> 

Answer 1

बस अपनी तालिका की चौड़ाई और ऊंचाई 100% पर सेट करें। लेकिन यदि कक्ष खाली हैं तो तालिका के मूल div को असाइन की ऊंचाई होनी चाहिए, वे निर्दिष्ट ऊंचाई के बिना कोई ऊर्ध्वाधर स्थान नहीं ले पाएंगे। लेआउट उद्देश्यों के लिए नहीं -

div { width: 100%;height: 500px;border: 5px yellow solid; } 
 
table { width: 100%;height: 100%;border: 3px red double; }

<div> 
 
    <table> 
 
    <tr> 
 
     <td bgcolor="#2062AF"></td> 
 
     <td bgcolor="#05BDB0"></td> 
 
     <td bgcolor="#FEFCC2"></td> 
 
     <td bgcolor="#FAA72A"></td> 
 
     <td bgcolor="#CD3450"></td> 
 
    </tr> 
 
    </table> 
 
</div>