ट्विटर बूटस्ट्रैप स्क्रॉल टेबल

Question

मैं अपनी वेबसाइट पर एक टेबल रखना चाहूंगा। समस्या यह है कि इस तालिका में लगभग 400 लाइनें होंगी। मैं तालिका की ऊंचाई को कैसे सीमित कर सकता हूं, और उस पर स्क्रॉलबार लागू कर सकता हूं? यह मेरा कोड है:

<div class="span3">
  <h2>Achievements left</h2>
<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Something</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Something</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Something</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Something</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Something</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Something</td>
    </tr>
  </tbody>
</table>

  <p><a class="btn" href="#">View details &raquo;</a></p>
</div>

मैंने मेज पर अधिकतम ऊंचाई और निश्चित ऊंचाई लगाने की कोशिश की, लेकिन यह काम नहीं करता है।

Answer 1

तालिका तत्व सीधे इसका समर्थन नहीं करते। मेज को एक div में रखें और div की ऊँचाई और सेट करें overflow: auto।

Comments

क्या यह वास्तव में काम करता था? मैंने यह कोशिश की और इसका कोई प्रभाव नहीं पड़ा।

— cjstehno

बस FYI करें, ओवरफ़्लो करने के बजाय 'ऑटो' पर ओवरफ़्लो सेट करना: स्क्रॉल करना, बेमानी क्षैतिज स्क्रॉल बार नहीं बनाएगा।

— दाकोदा

@JonathanWood: क्या overflowकेवल टेबल के मुख्य भाग पर लागू करने का एक तरीका है , लेकिन <thead>भागों को हमेशा प्रदर्शित किया जाता है?

— विलेम वान ओन्सेम

बस लोगों के लिए यह स्पष्ट करने के लिए .... <div style = "overflow: auto;"> <table class = "table"> .... </ table> </ div>

— हेनरी वेबर

कृपया एक छोटा सा उदाहरण दें!

— याह्या याह्याउई

Answer 2

.span3 {  
    height: 100px !important;
    overflow: scroll;
}​

आप इसे अपने स्वयं के डिव में लपेटना चाहेंगे या उस स्पैन 3 को दे सकते हैं, ताकि आप अपने पूरे लेआउट को प्रभावित न करें।

यहाँ एक पहेली है: http://jsfiddle.net/zm6rf/

Comments

ध्यान दें कि 'महत्वपूर्ण' महत्वपूर्ण नहीं है;)

— कॉर्ड्स

सावधान रहें, इन गुणों को सेट करने से आपके संपूर्ण बूटस्ट्रैप-संचालित साइट के सभी तत्व .span3प्रभावित होंगे । span3

— टेरी

आप केवल एक ऊंचाई प्रतिशत जोड़ सकते हैं यदि मूल कंटेनर में पिक्सेल ऊँचाई हो। आपके मामले में, आपको सेट .row से 500px और .span3 से 50% तक कुछ करना होगा। यदि माता-पिता के पास एक सेट ऊँचाई नहीं है, तो ब्राउज़र सामग्री की ऊँचाई तक सीमित कर देता है यदि आप इसे प्रतिशत देते हैं।

— कॉर्ड्स

क्या आप ऐसा कर सकते हैं जबकि टीबों को स्केलेबल और थ्रेड को नहीं बनाया जा सकता है?

— स्ट्रीटलाइट

आपकी जानकारी के लिए, अतिप्रवाह सेट करना: स्क्रॉल एक क्षैतिज स्क्रॉल बार बनाएगा, जो निरर्थक हो सकता है। इसे स्वचालित बनाना, अर्थात अतिप्रवाह: ऑटो, ऐसा नहीं करता है।

— दाकोडा

Answer 3

यह एक div में लपेट की जरूरत नहीं है ...

सीएसएस :

tr {
width: 100%;
display: inline-table;
table-layout: fixed;
}

table{
 height:300px;              // <-- Select the height of the table
 display: -moz-groupbox;    // Firefox Bad Effect
}
tbody{
  overflow-y: scroll;      
  height: 200px;            //  <-- Select the height of the body
  width: 100%;
  position: absolute;
}

बूटली : http://www.bootply.com/AgI8LpDugl

Comments

जब मैंने इस उदाहरण को देखा तो मैं बहुत उत्साहित हो गया, लेकिन यह पता चला कि लेआउट में "फंक अप" हो जाता है जब tdतत्व में डेटा भिन्न होता है। bootply.com/OsvzINuTUA

— Frito

@Frito चिंता मत करो, खुश रहो;) मैं सिर्फ टेबल-लेआउट भूल गया: निश्चित; ... लिंक अद्यतन

— BENARD पैट्रिक

Answer 4

मेरे पास एक ही मुद्दा था और उपरोक्त समाधानों के संयोजन का उपयोग किया (और अपने खुद के एक मोड़ को जोड़ा)। ध्यान दें कि मुझे हेडर और बॉडी के बीच तालमेल बनाए रखने के लिए कॉलम की चौड़ाई निर्दिष्ट करनी थी।

मेरे समाधान में, शीर्षलेख और पाद लेख स्थिर रहता है जबकि शरीर स्क्रॉल करता है।

<div class="table-responsive">
    <table class="table table-striped table-hover table-condensed">
        <thead>
            <tr>
                <th width="25%">First Name</th>
                <th width="13%">Last Name</th>
                <th width="25%" class="text-center">Address</th>
                <th width="25%" class="text-center">City</th>
                <th width="4%" class="text-center">State</th>
                <th width="8%" class="text-center">Zip</th>
            </tr>
        </thead>
    </table>
    <div class="bodycontainer scrollable">
        <table class="table table-hover table-striped table-condensed table-scrollable">
            <tbody>
                <!-- add rows here, specifying same widths as in header, at least on one row -->
            </tbody>
        </table>
    </div>
    <table class="table table-hover table-striped table-condensed">
        <tfoot>
            <!-- add your footer here... -->
        </tfoot>
    </table>
</div>

और फिर बस निम्नलिखित सीएसएस लागू:

.bodycontainer { max-height: 450px; width: 100%; margin: 0; overflow-y: auto; }
.table-scrollable { margin: 0; padding: 0; }

मैं उम्मीद करता हूं कि इससे किसी की मदद होगी।

Comments

धन्यवाद यह मदद करता है। दुर्भाग्य से मैं वें तत्वों की चौड़ाई निर्दिष्ट नहीं कर सकता क्योंकि यह एक मान्य तत्व नहीं है। (???)

— इरविन रूइजाक्कर्स

td के कॉलम को वें तत्वों के साथ संरेखित नहीं किया गया है क्योंकि स्क्रॉलबार सामग्री को

— स्थानांतरित

आह ... मैं एक मैक पर हूं, जहां स्क्रॉल बार अदृश्य हैं और स्क्रॉल करते समय केवल सामग्री के ऊपर दिखाई देते हैं। यह एक कठिन होगा क्योंकि स्क्रॉलबार ओएस और ब्राउज़र पर निर्भर होते हैं।

— टॉड

Answer 5

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

आप तालिका टैग में एक निश्चित-शीर्ष लेख विशेषता जोड़कर इसका उपयोग करते हैं:

<table class="table table-bordered" fixed-header>
...
</table>

यदि आप कोणीयज का उपयोग नहीं कर रहे हैं तो आप निर्देश की जावास्क्रिप्ट को ट्विक कर सकते हैं और इसके बजाय सीधे इसका उपयोग कर सकते हैं।

Answer 6

सीएसएस

.achievements-wrapper { height: 300px; overflow: auto; }

एचटीएमएल

<div class="span3 achievements-wrapper">
    <h2>Achievements left</h2>
    <table class="table table-striped">
    ...
    </table>
</div>

Comments

क्या ऊंचाई को सापेक्ष रखना संभव है?

— पांगी

मैं चाहता हूं कि पर्चों के साथ ऊंचाई तय हो। क्या यह संभव है? मैं इसे काम नहीं कर सका।

— पांगी

ज़रूर, बस टेबल की ऊंचाई 100% निर्धारित करें। .table-class-name { height: 100%; }।

— टेरी

यह मेरी तालिका का विस्तार करता है, और यह आगे बढ़ता है। (इसका कोई प्रभाव नहीं है)

— पांगी

इस विधि से, हेडर स्क्रॉल करने योग्य है, इसलिए टेबल हेडर को ठीक करने का कोई तरीका है?

— काइलिनिनकुबेटर

Answer 7

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

(निश्चित चौड़ाई का स्तंभ वह विधि है जिसका उपयोग मैं बड़ी पंक्ति की गणना तालिका के लिए करता हूं जिसके लिए केवल हेडर पंक्ति दोहराव की आवश्यकता होती है)

नमूना कोड:

<div style="height:30px;overflow:hidden;margin-right:15px;">
   <table class="table">
       <thead>
           <tr>
                <th>Col 1</th>
                <th>Col 2</th>
                <th>Col 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Cel 1,1</td>
                <td>Cel 1,2</td>
                <td>Cel 1,3</td>
            </tr>
            <tr>
                <td>Cel 2,1</td>
                <td>Cel 2,2</td>
                <td>Cel 2,3</td>
            </tr>
            <tr>
                <td>Cel 3,1</td>
                <td>Cel 3,2</td>
                <td>Cel 3,3</td>
            </tr>


        </tbody>
    </table>
</div>
<div style="height:100px;overflow-y:scroll;;">
    <table class="table">
        <thead>

        </thead>
        <tbody>
            <tr>
                <td>Cel 1,1</td>
                <td>Cel 1,2</td>
                <td>Cel 1,3</td>
            </tr>
            <tr>
                <td>Cel 2,1</td>
                <td>Cel 2,2</td>
                <td>Cel 2,3</td>
            </tr>
            <tr>
                <td>Cel 3,1</td>
                <td>Cel 3,2</td>
                <td>Cel 3,3</td>
            </tr>
             <tr style="color:white">
                <th>Col 1</th>
                <th>Col 2</th>
                <th>Col 3</th>
            </tr>
        </tbody>
    </table>
</div>

Answer 8

टेबल को एक div में रखें और उस div को क्लास दें pre-scrollable।

Answer 9

मुझे हाल ही में एक समान समस्या थी और विभिन्न समाधानों के मिश्रण का उपयोग करके इसे ठीक करना समाप्त हुआ।

पहला और सबसे सरल एक दो तालिकाओं का उपयोग करना था, एक हेडर के लिए और दूसरा शरीर के लिए। यह काम करता है लेकिन हेडर और बॉडी कॉलम संरेखित नहीं हैं। और, जब से मैं ट्विटर बूटस्ट्रैप टेबलों के साथ आने वाले ऑटो-आकार का उपयोग करना चाहता था, मैंने एक जावास्क्रिप्ट फ़ंक्शन बनाया जो हेडर को बदलता है: जब शरीर का प्रतिपादन किया जाता है; खिड़कियों का आकार बदल दिया गया है; स्तंभ में डेटा बदल जाता है, आदि।

यहाँ कुछ कोड का उपयोग किया गया है:

        <table class="table table-striped table-hover" style="margin-bottom: 0px;">
        <thead>
            <tr>
                <th data-sort="id">Header 1</i></th>
                <th data-sort="guide">Header 2</th>
                <th data-sort="origin">Header 3</th>
                <th data-sort="supplier">Header 4</th>
            </tr>
        </thead>
    </table>
    <div class="bodycontainer scrollable">
        <table class="table table-hover table-striped table-scrollable">
            <tbody id="rows"></tbody>
        </table>
    </div>

हेडर और बॉडी को दो अलग-अलग टेबल में बांटा गया है। उनमें से एक ऊर्ध्वाधर स्क्रॉलबार्स उत्पन्न करने के लिए आवश्यक शैली के साथ एक डीआईवी के अंदर है। यहाँ सीएसएस मैं इस्तेमाल किया है:

.bodycontainer {
  //height: 200px
  width: 100%;
  margin: 0;
}

.table-scrollable {
  margin: 0px;
  padding: 0px;
}

मैंने यहाँ ऊँचाई पर टिप्पणी की क्योंकि मुझे पृष्ठ के निचले भाग तक पहुँचने के लिए तालिका चाहिए थी, जो भी पृष्ठ की ऊँचाई हो सकती है।

हेडर में मेरे द्वारा उपयोग किए जाने वाले डेटा-सॉर्ट विशेषताएँ भी प्रत्येक td में उपयोग की जाती हैं। इस तरह मुझे चौड़ाई और हर td की पैडिंग और पंक्ति की चौड़ाई मिल सकती है। डेटा-सॉर्ट विशेषताओं का उपयोग करके मैंने सीएसएस का उपयोग करके प्रत्येक हेडर की पैडिंग और चौड़ाई का उपयोग किया है और हेडर पंक्ति जो हमेशा बड़ा होता है क्योंकि इसमें स्क्रॉल नहीं होता है। यहां कॉफ़ीस्क्रिप्ट का उपयोग करने वाला फ़ंक्शन है:

fixHeaders: =>
  for header, i in @headers
    tdpadding = parseInt(@$("td[data-sort=#{header}]").css('padding'))
    tdwidth = parseInt(@$("td[data-sort=#{header}]").css('width'))
    @$("th[data-sort=#{header}]").css('padding', tdpadding)
    @$("th[data-sort=#{header}]").css('width', tdwidth)
    if (i+1) == @headers.length
      trwidth = @$("td[data-sort=#{header}]").parent().css('width')
      @$("th[data-sort=#{header}]").parent().parent().parent().css('width', trwidth)
      @$('.bodycontainer').css('height', window.innerHeight - ($('html').outerHeight() -@$('.bodycontainer').outerHeight() ) ) unless @collection.length == 0

यहाँ मैं मानता हूँ कि आपके पास हेडर्स की एक सरणी है, जिसे @ हेडर्स कहा जाता है।

यह सुंदर नहीं है, लेकिन यह काम करता है। आशा है कि यह किसी की मदद करता है।

Answer 10

उपरोक्त सभी समाधान टेबल हेडर स्क्रॉल को भी बनाते हैं ... यदि आप tbody को स्क्रॉल करना चाहते हैं तो इसे लागू करें:

tbody {
    height: 100px !important;
    overflow: scroll;
    display:block;
}

Comments

यह केवल तभी काम करेगा जब इसकी एकल स्तंभ तालिका हो। यदि आपके पास कई स्तंभों वाली एक तालिका है तो यह केवल पहला स्तंभ स्क्रॉल करेगा।

— एम्पो

Answer 11

इन जवाबों में से किसी ने भी मेरे लिए संतोषजनक काम नहीं किया। उन्होंने या तो टेबल हेडिंग पंक्ति को ठीक नहीं किया या उन्हें काम करने के लिए निश्चित कॉलम चौड़ाई की आवश्यकता थी, और फिर भी हेडिंग पंक्ति और शरीर की पंक्तियों को विभिन्न ब्राउज़रों में गुमराह किया गया।

मैं बुलेट को काटने और jsGrid या मेरे व्यक्तिगत पसंदीदा, SlickGrid जैसे एक उचित ग्रिड नियंत्रण का उपयोग करने की सलाह देता हूं । यह स्पष्ट रूप से एक निर्भरता का परिचय देता है, लेकिन यदि आप चाहते हैं कि आपके टेबल क्रॉस-ब्राउज़र समर्थन के साथ वास्तविक ग्रिड की तरह व्यवहार करें, तो यह आपके बालों को बाहर खींचने से बचाएगा। यदि आप चाहते हैं तो यह आपको कॉलम और टन अन्य विशेषताओं के आकार को बदलने और बदलने का विकल्प भी देता है।

Answer 12

रे जोनाथन वुड का सुझाव। मेरे पास एक नई डिव के साथ तालिकाओं को लपेटने का विकल्प नहीं है जैसा कि मैं एक सीएमएस का उपयोग कर रहा हूं। यहाँ मैंने क्या किया JQuery का उपयोग:

$( "table" ).wrap( "<div class='table-overflow'></div>" );

यह "टेबल-ओवरफ्लो" वर्ग के साथ एक नए डिव के साथ टेबल तत्वों को लपेटता है।

आप फिर अपनी सीएसएस फ़ाइल में निम्नलिखित परिभाषा जोड़ सकते हैं:

.table-overflow { overflow: auto; }     

Answer 13

स्क्रॉल करने योग्य तालिका को लंबवत बनाने के लिए div के अंदर तालिका रखें। क्षैतिज रूप से तालिका स्क्रॉल करने योग्य बनाने के overflow-yलिए परिवर्तन overflow-x। बस overflowक्षैतिज और ऊर्ध्वाधर दोनों को स्क्रॉल करने योग्य तालिका बनाने के लिए।

<div style="overflow-y: scroll;"> 
    <table>
    ...
    </table>
</div>

Answer 14

लगा कि मैं यहाँ पर पोस्ट करूँगा क्योंकि मुझे बूटस्ट्रैप 4 के साथ काम करने के लिए उपरोक्त में से कोई भी नहीं मिल सकता है। मुझे यह ऑनलाइन मिला और मैंने इसके लिए काम किया ...

table
{
    width: 100%;
    display: block;
    border:solid black 1px;
}

thead
{
    display: inline-block;
    width: 100%;
    height: 20px;
}

tbody
{
    height: 200px;
    display: inline-block;
    width: 100%;
    overflow: auto;
}

th, td
{
    width: 100px;
    border:solid 1px black;
    text-align:center;
}

मैंने वर्किंग jsfindle भी अटैच किया है।

https://jsfiddle.net/jgngg28t/

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