ट्विटर बूटस्ट्रैप में उत्तरदायी टेबल हैंडलिंग

Question

जब किसी तालिका की चौड़ाई अवधि की चौड़ाई से अधिक हो, तो इस पृष्ठ की तरह: http://jsfiddle.net/rcHdC/

आप देखेंगे कि तालिका की सामग्री बाहर है span।

इस मामले को पूरा करने के लिए सबसे अच्छा तरीका क्या होगा?

Comments

आप क्या होना चाहेंगे?

— cimmanon

Answer 1

बूटस्ट्रैप 3 में अब बॉक्स से बाहर उत्तरदायी तालिकाएं हैं। हुर्रे! :)

आप इसे यहाँ देख सकते हैं: https://getbootstrap.com/docs/3.3/css/#tables-responsive

<div class="table-responsive">अपनी मेज के आसपास एक जोड़ें और आपको जाने के लिए अच्छा होना चाहिए:

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

इसे करने के लिए आप सभी लेआउट पर काम कर सकते हैं:

.table-responsive
{
    overflow-x: auto;
}

Comments

लेकिन यह केवल छोटे उपकरणों (768px के तहत) पर लागू होता है: एस स्रोत: getbootstrap.com/css/#tables-responsive

— VSP

सभी आकार के लेआउट पर इसे सक्षम करने के लिए, आप बस 768_ ब्लॉक_स्रोइड्स .css.scss फ़ाइल में 768 ब्लॉक से उत्तरदायी शैलियों को छोड़ सकते हैं। `` `.टेबल-रेस्पॉन्सिबल {चौड़ाई: 100%; अतिप्रवाह-य: छिपा हुआ; अतिप्रवाह-एक्स: स्क्रॉल; -ms-overflow-style: -ms-autohiding-स्क्रॉलबार; -वेबकिट-ओवरफ़्लो-स्क्रॉलिंग: स्पर्श; } `` `

— genkilabs

@ ase69s मेरे अद्यतन उत्तर की जाँच करें। बस अब मुझे बहुत सारे स्तंभों वाली एक मेज पर इसकी आवश्यकता थी। overflow-x: autoकस्टम CSSफ़ाइल में जोड़ने से बड़े डिस्प्ले लेआउट के लिए ट्रिक आती है।

— लेनियल मैकाफेर्री

आप निरंतरता के लिए, उस syle परिभाषा में सीमा को जोड़ना पसंद कर सकते हैं:border: 1px solid #dddddd;

— ptim

यह भी .table-responsive td, .table-responsive th { white-space:nowrap; }सुनिश्चित करना चाहते हैं कि कोशिकाओं को स्वचालित रूप से हटना न पड़े और लाइन ब्रेक जोड़ना न हो।

— rybo111

Answer 2

एक विकल्प जो उपलब्ध है वह है fooTable। एक उत्तरदायी वेबसाइट पर बहुत अच्छा काम करता है और आपको कई ब्रेकप्वाइंट सेट करने की अनुमति देता है ... fooTable लिंक

Comments

FooTable अब बॉक्स के बाहर Twitter बूटस्ट्रैप के साथ काम करने के लिए बनाया गया है।

— shasi kant

Answer 3

उत्तरदायी टेबल के साथ काम करते समय आप कई अलग-अलग चीजें कर सकते हैं।

मैं व्यक्तिगत रूप से क्रिस कॉयर द्वारा इस दृष्टिकोण को पसंद करता हूं:

• http://css-tricks.com/responsive-data-tables/

आप यहां कई अन्य विकल्प पा सकते हैं:

• http://css-tricks.com/responsive-data-table-roundup/
• http://bradfrost.github.io/this-is-responsive/patterns.html#tables

यदि आप बूटस्ट्रैप का लाभ उठा सकते हैं और जल्दी से कुछ प्राप्त कर सकते हैं, तो आप बस कुछ पंक्तियों को छिपाने के लिए ".hidden-phone" और ".hidden-tablet" श्रेणी के नामों का उपयोग कर सकते हैं लेकिन यह दृष्टिकोण कई मामलों में सर्वश्रेष्ठ हो सकता है। अधिक जानकारी (देखें "उत्तरदायी उपयोगिता वर्ग"):

• http://twitter.github.io/bootstrap/scaffolding.html#responsive

Comments

Coyer लिंक के लिए +1। मैं अतीत में महान प्रभाव के लिए इस्तेमाल किया है।

— फेटेज़ ला वेचे

हाँ, क्रिस Coyer समाधान बहुत साफ है। बूटस्ट्रैप या ज़र्बफ़ाउंडेशन द्वारा प्रदान किए गए एक से अधिक अच्छे (वे केवल क्षैतिज स्क्रॉल जोड़ते हैं)।

— Adrien Be

अब तक, जनवरी 2016, Coyier's और अन्य की प्रतिक्रियाशील चीजें 5 - 6 साल पुरानी हैं, इससे पहले कि हर कोई Twitter बूटस्ट्रैप का उपयोग करना शुरू कर दे।

— एंड्रयू कोपर

Answer 4

यदि आप बूटस्ट्रैप 3 और उससे कम का उपयोग कर रहे हैं, तो आप फ़ाइल को updatethe करके सभी रिज़ॉल्यूशन के लिए उत्तरदायी तालिकाएँ लागू कर सकते हैं:

tables.less

या इस भाग को अधिलेखित करें:

@media (max-width: @screen-xs) {
  .table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    overflow-x: scroll;
    border: 1px solid @table-border-color;

    // Tighten up spacing and give a background color
    > .table {
      margin-bottom: 0;
      background-color: #fff;

      // Ensure the content doesn't wrap
      > thead,
      > tbody,
      > tfoot {
        > tr {
          > th,
          > td {
            white-space: nowrap;
          }
        }
      }
    }

    // Special overrides for the bordered tables
    > .table-bordered {
      border: 0;

      // Nuke the appropriate borders so that the parent can handle them
      > thead,
      > tbody,
      > tfoot {
        > tr {
          > th:first-child,
          > td:first-child {
            border-left: 0;
          }
          > th:last-child,
          > td:last-child {
            border-right: 0;
          }
        }
        > tr:last-child {
          > th,
          > td {
            border-bottom: 0;
          }
        }
      }
    }
  }
}

साथ में:

@media (max-width: @screen-lg) {
  .table-responsive {
    width: 100%;
...

ध्यान दें कि मैंने पहली पंक्ति @ स्क्रीन-XX मान को कैसे बदला।

मुझे पता है कि सभी तालिकाओं को उत्तरदायी बनाना अच्छा नहीं लग सकता है, लेकिन मैंने इसे एलजी के लिए बड़ी तालिकाओं (बहुत सारे स्तंभों) पर सक्षम होने के लिए बेहद उपयोगी पाया।

आशा है कि यह किसी की मदद करता है।