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

Question

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

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

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

Comments

कृपया "काम नहीं करता है " पर विस्तार करें ।

— स्पार्क

आपको यह सुनिश्चित करना होगा कि आपके td के PARENT की एक विशिष्ट चौड़ाई हो (ऐसा हो कि आप चौड़ाई पास करें: 100%; शरीर से सभी तरह से आपकी td, या आप माता-पिता को दे सकते हैं (यहाँ: tr) 1000px या जो भी आप चाहें। । जब %% का उपयोग कर सीएसएस में यह हमेशा सटीक पिक्सल माता पिता के रूप में परिभाषित का उपयोग करता है और फिर बच्चों के लिए %% में पिक्सल बदल देती है, के रूप में वे एक आकार रिश्तेदार उनके माता पिता के लिए।

— फिलिप Meissner

रिकॉर्ड के लिए, अधिकतम-चौड़ाई अब सफारी और क्रोम में काम करती है। मुझे यकीन नहीं है कि कब तक इसका समर्थन किया गया है।

— याकूब

Answer 1

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

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

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

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

Comments

दरअसल सफारी और क्रोम में अब अधिकतम चौड़ाई काम करती है। मुझे यकीन नहीं है कि कब तक इसका समर्थन किया गया है।

— याकूब

Answer 2

पुराना सवाल जो मुझे पता है, लेकिन यह अब table-layout: fixedटेबल टैग पर सीएसएस संपत्ति का उपयोग करना संभव है । इस प्रश्न के नीचे से सीएसएस प्रतिशत चौड़ाई और तालिका सेल में पाठ-अतिप्रवाह

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

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

इसे अद्यतन फ़िडल में यहां देखें: http://jsfiddle.net/Fm5bM/4/

Comments

धन्यवाद! मुझे डर था कि इसका मतलब यह नहीं है कि यह उन कोशिकाओं की चौड़ाई को पुनर्गठित नहीं करेगा जिनके पास कोई चौड़ाई निर्धारित नहीं है, लेकिन सौभाग्य से ऐसा नहीं है।

— फेस

आपके jsfiddle में यदि मैं चौड़ाई गुण हटा देता हूं तो अधिकतम-चौड़ाई अभी भी काम नहीं करती है, इसलिए यह सुनिश्चित नहीं होता है कि यह समस्या को हल कैसे करता है।

— फ्रीज़क

@ सुपरफ़ोनिक मुझे लगता है कि आप भ्रमित हैं। यदि आप max-widthउस jsfiddle में निकालते हैं , तो चौड़ाई समान रहेगी, इसलिए यह max-widthवह सेट नहीं है। यह स्पष्ट हो सकता है यदि आप इसे max-width: 10%पहली बार के साथ प्रतिस्थापित करते हैं td... आप देखेंगे कि यह नहीं बदलता है। jsfiddle.net/w3f8ey22/1

— 21

तालिका-लेआउट: ओपी समस्या हल नहीं होती है। यह टेबल सेल पर जादुई रूप से 'न्यूनतम-चौड़ाई' का काम नहीं करता है। यदि टेबल-लेआउट: फिक्स्ड हटा दिया गया है, तो दोनों संदर्भित फिडल्स को डिस्प्ले में अंतर नहीं है।

— cmerriman

यह उत्तर भ्रामक है क्योंकि यह प्रश्न से संबंधित नहीं है

— Zoltán Süle

Answer 3

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

तालिका को अपनी स्वयं की डिव में रखें, फिर पूरी तालिका के लिए वांछित की चौड़ाई, न्यूनतम-चौड़ाई और / या अधिकतम-चौड़ाई निर्धारित करें। फिर, आप काम कर सकते हैं और अन्य कोशिकाओं के लिए चौड़ाई और न्यूनतम चौड़ाई सेट कर सकते हैं, और 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>
<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>