मैं प्रतिशत का उपयोग कर तालिका कक्ष की अधिकतम-चौड़ाई कैसे सेट कर सकता हूं?

Question

<table> 
<tr> 
<td>Test</td> 
<td>A long string blah blah blah</td> 
</tr> 
</table> 

<style> 
td{max-width:67%;} 
</style> 

उपर्युक्त काम नहीं करता है। मैं प्रतिशत का उपयोग कर तालिका सेल की अधिकतम-चौड़ाई कैसे सेट कर सकता हूं?

Answer 1

सीएसएस 2.1 कल्पना में definition of max-width, " 'न्यूनतम-चौड़ाई' और 'अधिकतम-चौड़ाई' के प्रभाव के अनुसार टेबल, इनलाइन टेबल, टेबल सेल, टेबल कॉलम और कॉलम समूह अपरिभाषित हैं। "तो आप सीधे टीडी तत्व पर अधिकतम-चौड़ाई निर्धारित नहीं कर सकते हैं।

यदि आप केवल दूसरे कॉलम को 67% तक लेना चाहते हैं, तो आप चौड़ाई निर्धारित कर सकते हैं (जो तालिका कक्षों के लिए न्यूनतम चौड़ाई है, 33% तक), उदाहरण के लिए उदाहरण के मामले

td:first-child { width: 33% ;} 

स्थापना दोनों कॉलम के लिए कि है कि अच्छी तरह से काम नहीं चलेगा, क्योंकि यह ब्राउज़र कॉलम समान चौड़ाई देना सुनिश्चित करने के लिए जाता है में।

Answer 2

प्रतिशत एक पूर्ण आकार के सापेक्ष होना चाहिए, इस प्रयास करें:

<table> 
<tr> 
<td>Testasdas 3123 1 dasd as da</td> 
<td>A long string blah blah blah</td> 
</tr> 
</table> 

<style> 
table{width:200px;} 
td{width:65%;border:1px solid black;} 
</style> 

Answer 3

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

तालिका को अपने स्वयं के div में रखें, फिर पूरी तालिका के लिए इच्छित चौड़ाई, न्यूनतम चौड़ाई, और/या अधिकतम चौड़ाई सेट करें। फिर, आप काम कर सकते हैं और अन्य कोशिकाओं के लिए चौड़ाई और न्यूनतम चौड़ाई निर्धारित कर सकते हैं, और अधिकतम चौड़ाई को प्राप्त करने के लिए div के लिए अधिकतम चौड़ाई प्रभावी ढंग से काम कर रही है और पीछे की ओर काम कर रही है।

<div id="tablediv"> 
<table width="100%"> 
<tr> 
    <td class="tdleft">Test</td> 
    <td>A long string blah blah blah</td> 
</tr> 
</table> 
</div> 

अपनी शैली में

फिर से रख:

#tablediv { 
    width:90%; 
    min-width:800px 
    max-width:1500px; 
} 
.tdleft { 
    width:20%; 
    min-width:200px; 
} 

वैसे, यह आप एक सेल से प्रति की एक "अधिकतम" चौड़ाई नहीं देता है, लेकिन यह कुछ नियंत्रण है कि इन-एवज काम हो सकता है की अनुमति नहीं इस तरह के एक विकल्प के। सुनिश्चित नहीं है कि यह आपकी आवश्यकताओं के लिए काम करेगा। मुझे पता है कि यह हमारी परिस्थिति के लिए काम करता है जहां हम पृष्ठ में नेविगेशन पक्ष को एक बिंदु तक ऊपर और नीचे स्केल करना चाहते हैं लेकिन इन दिनों सभी विस्तृत स्क्रीन के लिए।

Answer 4

पुराना प्रश्न मुझे पता है, लेकिन अब यह तालिका टैग पर सीएसएस संपत्ति table-layout: fixed का उपयोग कर संभव है। इस प्रश्न से नीचे उत्तर CSS percentage width and text-overflow in a table cell

यह आसानी से table-layout: fixed का उपयोग करके किया जाता है, लेकिन थोड़ा मुश्किल क्योंकि क्योंकि इस सीएसएस संपत्ति के बारे में ज्यादा लोग नहीं जानते हैं।

table { 
    width: 100%; 
    table-layout: fixed; 
} 

अद्यतन बेला यहाँ पर कार्य करते हुए देखें: http://jsfiddle.net/Fm5bM/4/