Twitter बूटस्ट्रैप टेबल में हमेशा 100% चौड़ाई क्यों होती है?

Question

मान लीजिए कि यह मार्कअप है:

<table class="table table-bordered" align="center"> 

मेरे पास कोई सेल नहीं है कि कितने सेल हैं, टेबल हमेशा 100% चौड़ाई की होती है। यही कारण है कि?

Comments

क्योंकि यह कुशलता से अपने माता-पिता की चौड़ाई का उपयोग करता है; यह है कि ग्रिड प्रणाली को कैसे काम करना चाहिए!

— विशाल

आप अपनी तालिका किस चौड़ाई की चाहते हैं?

— एंड्रेस इलिच

मैं चाहूंगा कि यह साधारण टेबल की तरह कोशिकाओं की संख्या पर

— निर्भर हो

उन लोगों के लिए जो स्पैन चौड़ाई के माध्यम से सेल चौड़ाई सेट करने का तरीका खोज रहे हैं, इस उत्तर की

— एलेक्सा 8

Answer 1

उनके कंटेनर के अनुसार बूटस्ट्रैप खिंचाव के भीतर सभी टेबल, जो आप आसानी .span*से अपनी पसंद के ग्रिड तत्व के अंदर अपनी टेबल रखकर कर सकते हैं । यदि आप इस संपत्ति को हटाना चाहते हैं, तो आप अपनी खुद की टेबल क्लास बना सकते हैं और बस उस तालिका में जोड़ सकते हैं जिसे आप सामग्री के साथ विस्तारित करना चाहते हैं:

.table-nonfluid {
   width: auto !important;
}

आप अपनी खुद की स्टाइलशीट के अंदर इस वर्ग को जोड़ सकते हैं और बस इसे अपनी तालिका के कंटेनर में जोड़ सकते हैं:

<table class="table table-nonfluid"> ... </table>

इस तरह से आपका परिवर्तन बूटस्ट्रैप स्टाइलशीट को प्रभावित नहीं करेगा (आप अपने दस्तावेज़ में कहीं और एक द्रव तालिका चाहते हो सकते हैं)।

Comments

यदि आप तालिका को केंद्र में रखने के लिए एक स्पैन * टैग के अंदर रखते हैं, तो क्या आप केवल एक ऑफसेट * भी शामिल करेंगे?

— एचपीडब्ल्यूडी

@dlackey हां, आप तालिका को केंद्र में रखने के लिए एक कक्षा के साथ ऑफसेट कर सकते हैं, आप इसे .span*अपनी चौड़ाई देने के लिए अपनी तालिका में एक वर्ग भी जोड़ सकते हैं ।

— एंड्रेस इलिच

बूटस्ट्रैप 3 के साथ कम से कम यह मेरे लिए काम !importantकर रहा हैwidth: auto

— geekQ

हमें टेबल के लिए बूटस्टार स्पैन क्लास का उपयोग करना है, या हमें मैन्युअल रूप से .span क्लास के लिए एक स्टाइल देना है,

— जोत धालीवाल

चेतावनी। । अगर-उत्तरदायी और .table- बॉर्डर के साथ संयोजन में उपयोग किया जाता है तो सावधान रहें। स्क्रीन की चौड़ाई 767px से नीचे होने पर बॉर्डर को .table-उत्तरदायी कंटेनर पर लागू किया जाता है। (बूटस्ट्रैप 3.x)

— स्टुअर्ट

Answer 2

<table style="width: auto;" ...ठीक काम करता है। क्रोम 38, IE 11 और फ़ायरफ़ॉक्स 34 में परीक्षण किया गया।

jsfiddle: http://jsfiddle.net/rpaul/taqodr8o/

Answer 3

यदि आप बूटस्ट्रैप 4 का उपयोग कर रहे हैं, तो उपयोग करें .w-auto।

Https://getbootstrap.com/docs/4.1/utilities/sizing/ देखें

Answer 4

उत्तर 1:

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

<div class="row">
    <div class="col-sm-6">
        <table></table>
    </div>
</div>

यह एक तालिका बनाएगा जो युक्त तत्व की चौड़ाई का आधा (12 में से 6) है।

मैं कभी-कभी अन्य उत्तरों के अनुसार इनलाइन शैलियों का उपयोग करता हूं, लेकिन यह हतोत्साहित करता है।

उत्तर # 2:

यदि आप बूटस्ट्रैप 4 का उपयोग कर रहे हैं, तो इसमें चौड़ाई के लिए कुछ अच्छे सहायक वर्ग हैं:

w-25, w-50, w-75, and w-100

यहाँ डॉक्टर है: https://getbootstrap.com/docs/4.0/utilities/sizing/

Comments

यह अब तक का सबसे सरल उपाय है और इसका स्वीकृत जवाब होना चाहिए

— जेफ ब्राउन

Answer 5

मेरे पास एक ही मुद्दा था, मैंने तालिका को निश्चित किया और फिर अपनी td चौड़ाई निर्दिष्ट की। यदि आपके पास है तो आप उन्हें भी कर सकते हैं।

<style>
table {
table-layout: fixed;
word-wrap: break-word;
}
</style>

<td width="10%" /td>

मेरे पास .table-nonfluid के साथ कोई भाग्य नहीं था।

Comments

कोशिश करेंwidth: auto !important;

— सिंह

आप बच सकते हैं !important(यह एक बुरा अभ्यास है )। नीचे एक उत्तर पर टिप्पणी देखें ।

— ओली बेनेट

Answer 6

मैंने जोड़ने की कोशिश की है style="width: auto !important"और मेरे लिए महान काम करता है!

Comments

यदि आप यह सुनिश्चित करते हैं कि आपका कस्टम CSS बूटस्ट्रैप सीएसएस के बाद दिखाई देता है (जैसे कि आपका कस्टम स्टाइल <link>टैग बूटस्ट्रैप टैग के नीचे दिखाई देता है <link>), तो नियम डिजाइन के अनुसार कैस्केड हो जाएंगे , और आपको अपने !importantअपवाद का उपयोग करने की आवश्यकता नहीं है । यह सही है क्योंकि बूटस्ट्रैप CSS में width: 100%;परिभाषित किया tableगया है और इसलिए यह आपके नियम का समर्थन कर रहा है। width: auto;

— ओली बेनेट

वास्तव में एक उत्तर नहीं, वर्तमान स्वीकृत उत्तर को संपादित करने के लिए बेहतर है जो अधिकांश लोग पढ़ते हैं (मैंने इसे अभी संपादित किया है) ।

— इयूलियन ओनोफ्रेई