Tabella scorrevole bootstrap di Twitter

Vorrei avere un tavolo sul mio sito web. Il problema è che questa tabella avrà circa 400 righe. Come posso limitare l'altezza della tabella e applicare la barra di scorrimento ad essa? Questo è il mio codice:

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

Ho provato ad applicare l'altezza massima e l'altezza fissa alla tabella, ma non funziona.

Gli elementi della tabella non sembrano supportarlo direttamente. Posizionare il tavolo in un div e impostare l'altezza del div e impostare overflow: auto.

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

Avrai voglia di avvolgerlo nel suo div o di dare a span3 un ID proprio così da non influenzare l'intero layout.

Ecco un violino: http://jsfiddle.net/zm6rf/

Non è necessario avvolgerlo in un div ...

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

Ho avuto lo stesso problema e ho usato una combinazione delle soluzioni di cui sopra (e ho aggiunto una mia svolta). Nota che ho dovuto specificare le larghezze di colonna per mantenerle coerenti tra intestazione e corpo.

Nella mia soluzione, l'intestazione e il piè di pagina rimangono fissi mentre il corpo scorre.

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

E quindi appena applicato il seguente CSS:

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

Spero che questo aiuti qualcun'altro.

Recentemente ho dovuto fare questo con bootstrap e angularjs, ho creato una direttiva angularjs che risolve il problema, puoi vedere un esempio funzionante e dettagli su questo post del blog .

Lo usi semplicemente aggiungendo un attributo ad intestazione fissa al tag della tabella:

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

Se non stai usando angularjs, puoi modificare il javascript della direttiva e utilizzarlo direttamente.

CSS

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

HTML

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

Questa potrebbe non essere una soluzione per il conteggio di righe di grandi dimensioni. Uso semplicemente il trucco della tabella di duplicazione per fare la cosa per la tabella di conteggio di piccole righe mentre può mantenere la larghezza della colonna flessibile, puoi provare questo violino .

(La colonna a larghezza fissa è il metodo che uso per la tabella di conteggio di righe di grandi dimensioni che richiede solo la duplicazione della riga di intestazione)

Codice di esempio:

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

Metti il ​​tavolo in un div e dai a quel div la classe pre-scrollable.

Di recente ho avuto un problema simile e ho finito per risolverlo usando una combinazione di soluzioni diverse.

Il primo e il più semplice era usare due tavoli, uno per le intestazioni e uno per il corpo. Funziona ma le intestazioni e le colonne del corpo non sono allineate. E, dal momento che volevo usare la dimensione automatica fornita con le tabelle bootstrap di Twitter, ho finito per creare una funzione Javascript che cambia le intestazioni quando: il corpo è reso; le finestre vengono ridimensionate; i dati nella colonna cambiano, ecc.

Ecco alcuni dei codici che ho usato:

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

Le intestazioni e il corpo sono divisi in due tabelle separate. Uno di questi è all'interno di un DIV con lo stile necessario per generare le barre di scorrimento verticali. Ecco il CSS che ho usato:

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

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

Ho commentato l'altezza qui perché volevo che la tabella raggiungesse il fondo della pagina, qualunque sia l'altezza della pagina.

Gli attributi di ordinamento dei dati che ho usato nelle intestazioni sono usati anche in ogni td. In questo modo ho potuto ottenere la larghezza e l'imbottitura di ogni td e la larghezza della riga. Usando gli attributi di ordinamento dei dati ho impostato usando CSS il riempimento e la larghezza di ciascuna intestazione di conseguenza e della riga di intestazione che è sempre più grande poiché non ha una barra di scorrimento. Ecco la funzione che utilizza coffeescript:

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

Qui presumo che tu abbia una serie di intestazioni chiamate @headers.

Non è carino ma funziona. Spero che aiuti qualcuno.

Tutte le soluzioni sopra fanno scorrere anche l'intestazione della tabella ... Se vuoi scorrere solo tbody, applica questo:

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

Nessuna di queste risposte ha funzionato in modo soddisfacente per me. Non hanno riparato la riga di intestazione della tabella in posizione o hanno richiesto larghezze di colonna fisse per funzionare, e anche allora tendevano ad avere la riga di intestazione e le righe del corpo disallineate in vari browser.

Consiglio di mordere il proiettile e di usare un controllo della griglia adeguato come jsGrid o il mio preferito personale, SlickGrid . Ovviamente introduce una dipendenza, ma se vuoi che i tuoi tavoli si comportino come griglie reali con supporto cross-browser, questo ti farà risparmiare i capelli. Ti dà anche la possibilità di ordinare e ridimensionare le colonne oltre a tonnellate di altre funzionalità, se lo desideri.

Il suggerimento di Re Jonathan Wood. Non ho la possibilità di avvolgere le tabelle con un nuovo div in quanto sto usando un CMS. Utilizzando JQuery ecco cosa ho fatto:

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

Questo avvolge gli elementi della tabella con un nuovo div con la classe "overflow della tabella".

È quindi possibile aggiungere semplicemente la seguente definizione nel file CSS:

.table-overflow { overflow: auto; }     

mettere il tavolo all'interno del div per rendere il tavolo scorrevole verticalmente. cambia overflow-yin overflow-xper rendere la tabella scorrevole orizzontalmente. solo overflowper rendere il tavolo scorrevole sia in orizzontale che in verticale.

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

Ho pensato di postare qui perché non riuscivo a far funzionare nessuno dei precedenti con Bootstrap 4. L'ho trovato online e ho funzionato perfettamente per me ...

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

Ho anche attaccato il jsfindle funzionante.

https://jsfiddle.net/jgngg28t/

Spero che aiuti qualcun altro.