Tableau défilant Twitter bootstrap

Question

Je voudrais avoir un tableau sur mon site web. Le problème est que ce tableau comptera environ 400 lignes. Comment puis-je limiter la hauteur du tableau et lui appliquer une barre de défilement ? Voici mon code :

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

J'ai essayé d'appliquer une hauteur maximale et une hauteur fixe à la table, mais cela ne fonctionne pas.

Answer 1

Les éléments de tableau ne semblent pas prendre en charge cette fonction directement. Placez le tableau dans une div, définissez la hauteur de la div et définissez overflow: auto .

Answer 2

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

Vous devrez l'intégrer dans son propre div ou donner à ce span3 un id propre afin de ne pas affecter toute la mise en page.

Voici un violon : http://jsfiddle.net/zm6rf/

Answer 3

Pas besoin de l'envelopper dans 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

Answer 4

J'ai eu le même problème et j'ai utilisé une combinaison des solutions ci-dessus (et j'ai ajouté une touche personnelle). Notez que j'ai dû spécifier la largeur des colonnes pour qu'elles restent cohérentes entre l'en-tête et le corps du texte.

Dans ma solution, l'en-tête et le pied de page restent fixes tandis que le corps défile.

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

Et puis j'ai appliqué le CSS suivant :

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

J'espère que cela aidera quelqu'un d'autre.

Answer 5

CSS

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

HTML

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