क्या HTML / CSS का उपयोग करने का एक तरीका है (सापेक्ष आकार के साथ) कोशिकाओं की एक पंक्ति बनाने के लिए उस तालिका की पूरी चौड़ाई खींचना जिसके भीतर वह निहित है?
कोशिकाएं समान चौड़ाई वाली होनी चाहिए और बाहरी तालिका का आकार भी गतिशील होता है <table width="100%">।
वर्तमान में अगर मैं एक निश्चित आकार निर्दिष्ट नहीं करता; कोशिकाएं अपनी सामग्री को फिट करने के लिए सिर्फ ऑटो करती हैं।
जवाबों:
आपको कोशिकाओं के लिए एक विशिष्ट चौड़ाई निर्धारित करने की आवश्यकता नहीं है, table-layout: fixedसमान रूप से कोशिकाओं को फैलाने के लिए पर्याप्त है।
ul {
width: 100%;
display: table;
table-layout: fixed;
border-collapse: collapse;
}
li {
display: table-cell;
text-align: center;
border: 1px solid hotpink;
vertical-align: middle;
word-wrap: break-word;
}<ul>
<li>foo<br>foo</li>
<li>barbarbarbarbar</li>
<li>baz</li>
</ul>ध्यान दें कि
table-layoutतालिका स्टाइल तत्व को काम करने के लिए चौड़ाई सेट होना चाहिए (मेरे उदाहरण में 100%)।
word-wrap:break-wordइस मुद्दे को जोड़ना , जैसा कि मैंने अभी पता लगाया है
बस प्रतिशत चौड़ाई और निश्चित तालिका लेआउट का उपयोग करें :
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>साथ में
table { table-layout: fixed; }
td { width: 33%; }फिक्स्ड टेबल लेआउट महत्वपूर्ण है क्योंकि यदि सामग्री फिट नहीं होती है तो ब्राउज़र चौड़ाई को समायोजित कर देगा, यदि सामग्री फिट नहीं होती है, तो चौड़ाई अन्यथा निश्चित तालिका लेआउट के बिना एक नियम नहीं है।
जाहिर है, अपनी परिस्थितियों को फिट करने के लिए सीएसएस को समायोजित करें, जिसका अर्थ है आमतौर पर स्टाइल को किसी दिए गए वर्ग के साथ या संभवतः किसी दिए गए आईडी के साथ तालिकाओं पर लागू करना।
tdक्योंकि आपके पास स्तंभों की गतिशील संख्या हो सकती है ... और यह इसके बिना काम करता है।
का उपयोग table-layout: fixedकरने के लिए एक संपत्ति के रूप में tableऔर width: calc(100%/3);के लिए td( यह मानते हुए कि वहाँ 3 रहे हैं tdकी )। इन दो गुणों के सेट के साथ, तालिका कोशिकाएं आकार में समान होंगी ।
डेमो देखें ।