तालिका तालिका चौड़ाई = 100%

Question

पर पहली कॉलम HTML तालिका में लचीला है मेरे पास 8 कॉलम और एकाधिक पंक्तियों वाला एक HTML तालिका है। प्रत्येक सेल की सामग्री गतिशील रूप से उत्पन्न होती है और किसी भी कॉलम की चौड़ाई की भविष्यवाणी करना मुश्किल होता है। मैं टेबल चौड़ाई = 100% सेट करता हूं क्योंकि मैं तालिका की पूरी चौड़ाई को लेना चाहता हूं। मैं कॉलम 2 से 8 को चौड़ाई के समान रखना चाहता हूं जैसे कि मैंने टेबल चौड़ाई निर्धारित नहीं की है। तो मैं अपनी चौड़ाई का विस्तार करने के लिए पहले कॉलम के लिए चाहूंगा ताकि तालिका की चौड़ाई 100% हो जाए। क्या यह संभव है?

Answer 1

2 - 8 के लिए स्पष्ट चौड़ाई निर्धारित करें और सेल 1 शेष स्थान के साथ अपनी चौड़ाई निर्धारित करेगा। आप पहले सेल में व्हाइटस्पेस के लिए भी लपेट सकते हैं, इसलिए सामग्री लपेटती नहीं है, लेकिन आवश्यक होने पर सेल को बढ़ने के लिए मजबूर करें।

Answer 2

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

क्या आप यह स्पष्ट कर सकते हैं कि आप क्या हासिल करना चाहते हैं?

Answer 3

<div> 
<table width="100%"> 
<tr> 
<td width="100%"></td> <- this is col 1 
<td></td><td></td><td></td><td></td><td></td><td></td><td></td> <- cols 2-8 
</tr> 
</table> 
</div> 

100% करने के लिए पहले सेल की स्थापना करके, यह जबकि अभी भी कोशिकाओं के बाकी की चौड़ाई का सम्मान, के रूप में व्यापक रूप में संभव होने की कोशिश करने के लिए है कि सेल के लिए बाध्य करेगा। यदि कक्ष 2-8 में टेक्स्ट होता है, तो आप जोड़ सकते हैं ताकि पहले सेल के 100% चौड़ाई के प्रयास के कारण उन कोशिकाओं के अंदर टेक्स्ट लपेटा न जाए।

Answer 4

तालिका पर और अन्य सभी स्तंभों पर चौड़ाई निर्धारित करें; शेष कॉलम सभी ढीले उठाएगा।

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

निश्चित लेआउट मोड में, कक्षों की पहली पंक्ति या <col> तत्व चौड़ाई निर्धारित करते हैं; आगे पंक्तियां चौड़ाई को प्रभावित नहीं करती हैं। यह तेजी से प्रतिपादन करता है; आपको अपनी हर तालिका के लिए निश्चित लेआउट का उपयोग करना चाहिए।

<table> 
    <col class="name" /><col class="data" /><col class="data" /><col class="data" /> 
    <col class="data" /><col class="data" /><col class="data" /><col class="data" /> 
    <tr> 
     <td>tiddle om pom pom</td> 
     <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td> 
    </tr> 
</table> 

table { width: 100%; table-layout: fixed; } 
col.data { width: 2em; }