Twitter bootstrap kaydırılabilir tablo

Web sitemde bir masa olmasını istiyorum. Sorun şu ki, bu tablonun yaklaşık 400 satırı olacaktır. Tablonun yüksekliğini nasıl sınırlayabilir ve ona kaydırma çubuğu uygulayabilirim? Bu benim kodum:

<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>

Tabloya maksimum yükseklik ve sabit yükseklik uygulamaya çalıştım, ancak çalışmıyor.

Tablo öğeleri bunu doğrudan desteklemiyor gibi görünüyor. Tabloyu bir div içine yerleştirin ve div ve setin yüksekliğini ayarlayın overflow: auto.

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

Kendi div'inize sarmak veya span3'e kendi kimliğini vermek istersiniz, böylece tüm düzeninizi etkilemezsiniz.

İşte bir keman: http://jsfiddle.net/zm6rf/

Bir div sarmak gerekmez ...

CSS :

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;
}

Bootply : http://www.bootply.com/AgI8LpDugl

Aynı sorunu yaşadım ve yukarıdaki çözümlerin bir kombinasyonunu kullandım (ve kendime bir twist ekledim). Üstbilgi ve gövde arasında tutarlı olmasını sağlamak için sütun genişliklerini belirtmem gerektiğini unutmayın.

Benim çözümümde, gövde kaydırılırken üstbilgi ve altbilgi sabit kalıyor.

<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>

Ve sonra sadece aşağıdaki CSS'yi uyguladı:

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

Umarım bunun bir başkasına yardımı olur.

Son zamanlarda bunu bootstrap ve angularjs ile yapmak zorunda kaldım, sorunu çözen bir angularjs yönergesi oluşturdum, bu blog yazısında çalışan bir örnek ve ayrıntıları görebilirsiniz .

Bunu yalnızca tablo etiketine bir sabit başlık özelliği ekleyerek kullanırsınız:

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

Eğer açısaljs kullanmıyorsanız, direktifin javascript'ini değiştirebilir ve doğrudan kullanabilirsiniz.

CSS

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

HTML

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

Bu, büyük satır sayısı için bir çözüm olmayabilir. Ben sadece esnek sütun genişliği tutabilir iken küçük satır sayısı tablo için bir şey yapmak için çoğaltma tablo hile kullanın, bu keman deneyebilirsiniz .

(Sabit genişlik sütunu, yalnızca başlık satırı çoğaltması gerektiren büyük satır sayısı tablosu için kullandığım yöntemdir)

Basit kod:

<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>

Tabloyu bir div içine koyun ve bu div'e sınıf verin pre-scrollable.

Son zamanlarda benzer bir sorun yaşadım ve farklı çözümlerin bir karışımını kullanarak düzelttim.

İlk ve en basit olanı, biri üstbilgi diğeri de gövde için olmak üzere iki tablo kullanmaktı. Bu işe yarar, ancak üstbilgiler ve gövde sütunları hizalanmamıştır. Ve twitter bootstrap tabloları ile birlikte gelen otomatik boyutu kullanmak istediğimden, ne zaman başlıklarını değiştiren bir Javascript işlevi oluşturdum: gövde işlendi; pencereler yeniden boyutlandırılır; sütundaki veriler değişir vb.

İşte kullandığım kod bazıları:

        <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>

Başlıklar ve gövde iki ayrı tabloya ayrılmıştır. Bunlardan biri, dikey kaydırma çubukları oluşturmak için gerekli stile sahip bir DIV'nin içindedir. İşte kullandığım CSS:

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

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

Burada yüksekliği yorumladım çünkü sayfa yüksekliği ne olursa olsun tablonun sayfanın altına ulaşmasını istedim.

Üstbilgilerde kullandığım veri sıralama nitelikleri her td'de de kullanılır. Bu şekilde her td'nin genişliğini ve dolgusunu ve sıranın genişliğini alabilirdim. CSS kullanarak ayarladığım veri sıralama niteliklerini kullanarak, her bir başlığın ve bir kaydırma çubuğuna sahip olmadığı için her zaman daha büyük olan başlık satırının dolgusu ve genişliği. İşte coffeescript kullanan fonksiyon:

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

Burada @headers adlı başlıkların bir dizi olduğunu varsayalım.

Güzel değil ama işe yarıyor. Umarım birine yardımcı olur.

Yukarıdaki tüm çözümler tablo üstbilgisi kaydırma da yapar ... Sadece tbody kaydırmak istiyorsanız bunu uygulayın:

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

Bu cevapların hiçbiri benim için tatmin edici değildi. Tablo başlığı satırını yerine sabitlemediler veya çalışmak için sabit sütun genişliklerine ihtiyaç duydular ve daha sonra başlık satırı ve gövde satırlarının çeşitli tarayıcılarda yanlış hizalanma eğilimindeydiler.

Mermiyi ısırmanızı ve jsGrid veya kişisel favorim SlickGrid gibi uygun bir ızgara kontrolü kullanmanızı öneririm . Açıkçası bir bağımlılık getiriyor, ancak tablolarınızın çapraz tarayıcı desteği ile gerçek ızgaralar gibi davranmasını istiyorsanız, bu da saçlarınızı çekmenizi sağlayacaktır. İsterseniz sütunları ve tonlarca diğer özelliği sıralama ve yeniden boyutlandırma seçeneği de sunar.

Jonathan Wood'un önerisi. Bir CMS kullanıyorum gibi tabloları yeni bir div ile kaydırma seçeneği yok. JQuery kullanarak yaptığım:

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

Bu, tablo öğelerini "table-overflow" sınıfıyla yeni bir div ile sarar.

Daha sonra css dosyanıza aşağıdaki tanımı ekleyebilirsiniz:

.table-overflow { overflow: auto; }     

kaydırılabilir tabloyu dikey yapmak için tabloyu div içine koyun. tabloyu yatay kaydırılabilir yapmak overflow-yiçin overflow-xolarak değiştirin . Sadece overflowmasa kaydırılabilir yatay ve dikey hem yapmak.

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

Yukarıda Bootstrap 4 ile çalışmak için alamadım beri buraya yazı düşündüm. Bu çevrimiçi bulundu ve benim için mükemmel çalıştı ...

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;
}

Ayrıca çalışan jsfindle ekledim.

https://jsfiddle.net/jgngg28t/

Umarım başka birine yardımcı olur.