सामग्री के लिए फ़िट सेल चौड़ाई

Question

निम्नलिखित मार्कअप को देखते हुए, मैं कैसे एक सेल (स्तंभ में सभी कोशिकाओं) को बल के बजाय खिंचाव (जो कि डिफ़ॉल्ट व्यवहार है) के भीतर सामग्री की चौड़ाई पर फिट करने के लिए उपयोग कर सकता है?

<style type="text/css">
td.block
{
border: 1px solid black;
}
</style>
<table style="width: 100%;">
<tr>
    <td class="block">this should stretch</td>
    <td class="block">this should stretch</td>
    <td class="block">this should be the content width</td>
</tr>
</table>

संपादित करें: मुझे पता है कि मैं हार्ड कोड को चौड़ाई दे सकता हूं, लेकिन मैं ऐसा नहीं करूंगा, क्योंकि उस कॉलम में जाने वाली सामग्री गतिशील है।

नीचे दी गई छवि को देखते हुए, पहली छवि वह है जो मार्कअप का उत्पादन करती है। दूसरी छवि वह है जो मैं चाहता हूं।

Comments

मैं आपके सवाल को नहीं समझता। क्या आप अंतिम कॉलम को विशिष्ट चौड़ाई के रूप में सीमित करना चाहते हैं?

— मेटलफ्रॉग

@diEcho मुझे लगा कि यह काफी स्पष्ट था। मैं एक तस्वीर या दो जोड़ दूँगा।

— मैन्सफील्ड

के संभावित डुप्लिकेट सीएसएस तालिका स्तंभ autowidth

— वादज़्मी

Answer 1

मुझे यकीन नहीं है कि अगर मैं आपके सवाल को समझ पाऊंगा, लेकिन मैं इस पर एक तंज कसूंगा। उदाहरण की JSfiddle ।

HTML:

<table style="width: 100%;">
<tr>
    <td class="block">this should stretch</td>
    <td class="block">this should stretch</td>
    <td class="block">this should be the content width</td>
</tr>
</table>

सीएसएस:

td{
    border:1px solid #000;
}

tr td:last-child{
    width:1%;
    white-space:nowrap;
}

Comments

<table style="width:100%">इसके बजाय आप क्यों लिखते हैं<table width="100%" >

— diEcho

@diEcho मैंने वह भाग नहीं लिखा, जो उदाहरण कोड से था। भले ही, तत्वों पर चौड़ाई विशेषता का उपयोग करना बुरा है। इस त्वरित उदाहरण में, इनलाइन सीएसएस ठीक है, लेकिन इसे एक फ़ाइल में सार किया जाना चाहिए अगर यह उत्पादन-स्तर कोड था।

— मेटलफ्रॉग

इस IMO को करने के लिए एक क्लीनर तरीका "नोस्ट्रेच" (या ऐसा कुछ) नामक शैली को परिभाषित करना होगा, और फिर सीएसएस में नॉस्ट्रेच को चौड़ाई: 1% और नॉरैप करने के लिए परिभाषित करना होगा। फिर आखिरी टीडी में 'क्लास = "नॉस्ट्रेच ब्लॉक" होगा। इस तरह आप किसी भी सेल को "नोस्ट्रेच" कर सकते हैं।

— टिम होल्ट

यह एक अच्छा समाधान है, लेकिन दुख की बात है कि बूटस्ट्रैप 3 में मेरे बटन समूह इससे लिपटेंगे : jsfiddle.net/wexdX/326 कोई भी विचार कि मैं इसे कैसे दबा सकता हूं?

— मार्टिन ब्रॉन

यह तभी काम करता है जब सामग्री व्यापक होती है तब चौड़ाई: 1% - सही? क्योंकि अगर सामग्री छोटी है तो चौड़ाई: 1%, सेल बड़ी होगी।

— एडम

Answer 2

स्थापना

max-width:100%;
white-space:nowrap;

आपकी समस्या का समाधान करेगा।

Answer 3

मेरे लिए, यह तालिका और उसके स्तंभों के लिए सबसे अच्छा ऑटोफ़िट और ऑटोरेसेज़ है (सीएसएस का उपयोग करें! महत्वपूर्ण ... केवल अगर आप नहीं कर सकते हैं तो)

.myclass table {
    table-layout: auto !important;
}

.myclass th, .myclass td, .myclass thead th, .myclass tbody td, .myclass tfoot td, .myclass tfoot th {
    width: auto !important;
}

टेबल के लिए या टेबल कॉलम के लिए सीएसएस चौड़ाई निर्दिष्ट न करें। यदि तालिका सामग्री बड़ी है तो यह स्क्रीन के आकार से अधिक हो जाएगी।

Answer 4

सीएसएस की चौड़ाई 1% या 100% एक तत्व के अनुसार सभी चश्मे के अनुसार मैं पता लगा सकता हूं कि माता-पिता से संबंधित है। हालाँकि पलक झपकते इंजन (क्रोम) और गीको (फ़ायरफ़ॉक्स) लिखने के क्षण में लगता है कि १% या १००% (एक कॉलम सिकुड़ या उपलब्ध स्थान को भरने के लिए एक स्तंभ) को अच्छी तरह से संभालना है, यह सभी सीएसएस विनिर्देशों के अनुसार गारंटी नहीं है मैं इसे ठीक से प्रस्तुत करने के लिए मिल सकता है।

एक विकल्प के लिए CSS4 फ्लेक्स divs के साथ तालिका को बदलना है:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

यह नए ब्राउज़रों में काम करता है यानी IE11 + लेख के निचले भाग में तालिका देखें।

Answer 5

इसे करने के कई तरीके हैं!

सही है अगर मैं गलत हूँ, लेकिन सवाल इस तरह के परिणाम की तलाश में है।

<table style="white-space:nowrap;width:100%;">
<tr>
<td class="block" style="width:50%">this should stretch</td>
<td class="block" style="width:50%">this should stretch</td>
<td class="block" style="width:auto">this should be the content width</td>
</tr>
</table>

पहले 2 फ़ील्ड शेष पृष्ठ को "साझा" करेंगे (नोट: यदि आप अधिक पाठ को या तो 50% फ़ील्ड में जोड़ते हैं तो इसमें अधिक स्थान लगेगा), और अंतिम फ़ील्ड लगातार तालिका पर हावी होगी।

यदि आप पाठ लपेटने में प्रसन्न हैं तो आप श्वेत-स्थान को स्थानांतरित कर सकते हैं : Nowrap; 3rd फ़ील्ड की शैली
उस क्षेत्र में एक नई लाइन शुरू करने का एकमात्र तरीका होगा।

वैकल्पिक रूप से, आप अंतिम फ़ील्ड पर लंबाई निर्धारित कर सकते हैं। चौड़ाई: 150px, और पहले 2 फ़ील्ड पर प्रतिशत छोड़ दें।

उम्मीद है की यह मदद करेगा!

Answer 6

सरल :

    <div style='overflow-x:scroll;overflow-y:scroll;width:100%;height:100%'>