बूटस्ट्रैप का उपयोग करके मोबाइल पर टेबल कैसे प्रदर्शित करें?

Question

मेरी टेबल डेस्कटॉप पर ठीक प्रदर्शित होती है, लेकिन एक बार जब मैं मोबाइल संस्करण को देखने की कोशिश करता हूं तो मेरी तालिका मोबाइल डिवाइस स्क्रीन के लिए बहुत चौड़ी हो जाती है। मैं एक उत्तरदायी लेआउट का उपयोग कर रहा हूं।

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

Comments

मैंने देखा कि बूटस्ट्रैप 3.0 "मोबाइल पहले" होने जा रहा है। क्या किसी को लगता है कि वे मोबाइल तालिकाओं के इस "मुद्दे" को हल करेंगे?

बूटस्ट्रैप 3 में टेबल्स अभी भी समान हैं। :(

— गिल्स रॉबर्ट्स

@GilesRoberts अगर "बूटस्ट्रैप 3 में समान" से आपका मतलब है "अब बूटस्ट्रैप 3 में उत्तरदायी" तो हाँ, वे वही हैं ।

— ta.speot.is

@ ta.speot.is वे अब जारी उम्मीदवारों की तुलना में बेहतर हैं। सभी उदाहरणों में हालांकि केवल 4 कॉलम हैं। अभी भी विस्तृत तालिकाओं के लिए बहुत अच्छी तरह से काम नहीं करता है। मैंने एक निश्चित पहले कॉलम और बाकी सभी स्क्रॉलिंग के साथ एक समाधान का उपयोग करके समाप्त कर लिया है।

— गिल्स रॉबर्ट्स

@ ta.speot.is बस नीचे अपना जवाब देखा। याद आया कि बूटस्ट्रैप 3 में एक टेबल-रेस्पॉन्सिव क्लास है। अच्छी तरह से काम करता है अगर आपको कुछ स्तंभों की आवश्यकता नहीं है तो हमेशा दिखाई दें।

— गिल्स रॉबर्ट्स

Answer 1

बूटस्ट्रैप 3 उत्तरदायी तालिकाओं का परिचय देता है :

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

बूटस्ट्रैप 4 समान है, लेकिन कुछ नए वर्गों के माध्यम से अधिक नियंत्रण के साथ :

... सभी व्यूपोर्ट में उत्तरदायी ... के साथ .table-responsive। या, एक अधिकतम ब्रेकपॉइंट चुनें जिसके साथ उपयोग करके एक उत्तरदायी तालिका हो .table-responsive{-sm|-md|-lg|-xl}।

उदाहरण देने के लिए जेसन ब्रैडली को श्रेय :

Comments

धन्यवाद। 99.9% लोगों की तरह, मैंने अपडेट के प्रलेखन को पढ़ने की जहमत नहीं उठाई। मुझे लगता है मुझे होना चाहिए।

— डेविड बेलांगर

वास्तव में यह है ! इसके अलावा, यह वही कर रहा है जो मैं पहली बार करना चाहता था, इसलिए मेरे लिए यह 1 में 1 है!

— डेविड बेलांगेर

वास्तव में table-responsiveकक्षा क्या करती है? बूटस्ट्रैप डॉक्स का कहना है कि "उन्हें क्षैतिज रूप से स्क्रॉल करने के लिए", लेकिन मुझे स्क्रॉलिंग से संबंधित अंतर दिखाई नहीं देता है। एकमात्र अंतर जो मैंने देखा है कि एक निश्चित स्क्रीन आकार ( उदाहरण में देखा गया ) के तहत तालिका को बाहर की तरफ सीमाएं मिलती हैं ।

— डेनिस

@ ta.speot.is मैंने महसूस किया कि मैंने प्रलेखन को गलत समझा और गलत तरीके से कक्षा का उपयोग कर रहा था। मैं .table-responsiveटेबल <table class="table table-responsive">को लपेटने के बजाय (जैसे ) टेबल से ही जोड़ रहा था .table-responsive, जिसे आपने अपने उदाहरण में बताया था।

— डेनिस

@PirateApp उन स्तंभों के उपयोग hidden-*पर उपयोग करें जिन्हें tdआप getbootstrap.com/docs/3.3/css/#responsive-utilities

— ta.speot.is

Answer 2

आप इन तरीकों में से एक को आजमाने पर भी विचार कर सकते हैं, क्योंकि बड़ी टेबल मोबाइल पर बिलकुल भी अनुकूल नहीं हैं, भले ही वह काम करे:

http://elvery.net/demo/responsive-tables/

मैं 'नो मोर टेबल्स' का आंशिक हूँ लेकिन यह स्पष्ट रूप से आपके आवेदन पर निर्भर करता है।

Comments

शानदार लिंक और तीन वास्तव में महान समाधान! मुझे इस सवाल का जवाब देने के लिए अपने तरीके से वापस आना पड़ा। धन्यवाद!

— साइमन

एक उत्तर जिसमें केवल एक लिंक होता है वह है खराब स्टैक ओवरफ्लो शिष्टाचार। पृष्ठ गायब हो सकता है, पृष्ठ की सामग्री बदल सकती है, उत्तर तुरंत दिखाई नहीं देता है, उत्तर को बेहतर नहीं किया जा सकता है, और इसी तरह। BTW लिंक किसी भी अधिक सही सामग्री को इंगित नहीं करता है।

— डेनिस

सहमत हैं, लेकिन अभी के लिए: web.archive.org/web/20130725223053/http://elvery.net/demo/…

— Chords

@ डेनिस सही है। लिंक में क्या है, यह बताने के लिए कृपया अपना उत्तर विस्तृत करें और लिंक को डेमो और आगे के विवरण के लिए भी रखें। आप मेरे upvote फिर भी मिलता है क्योंकि लिंक सुपर दिलचस्प है। चीयर्स।

— मारियो अवध

Answer 3

कंटेनर के अनुसार बूटस्ट्रैप खिंचाव के भीतर सभी टेबल। आप अपने टेबल .spanको आकार को नियंत्रित करने के लिए एक तत्व के अंदर रख सकते हैं । यह SO प्रश्न आपकी सहायता कर सकता है

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