Tabla desplazable de arranque de Twitter

Me gustaría tener una mesa en mi sitio web. El problema es que esta tabla tendrá aproximadamente 400 líneas. ¿Cómo puedo limitar la altura de la tabla y aplicarle la barra de desplazamiento? Este es mi código:

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

Intenté aplicar la altura máxima y la altura fija a la mesa, pero no funciona.

Los elementos de la tabla no parecen soportar esto directamente. Coloque la tabla en un div y establezca la altura del div y el conjunto overflow: auto.

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

Querrá envolverlo en su propio div o darle a ese span3 una identificación propia para que no afecte todo su diseño.

Aquí hay un violín: http://jsfiddle.net/zm6rf/

No necesito envolverlo en 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

Tuve el mismo problema y utilicé una combinación de las soluciones anteriores (y agregué un giro propio). Tenga en cuenta que tuve que especificar anchos de columna para mantenerlos consistentes entre el encabezado y el cuerpo.

En mi solución, el encabezado y el pie de página permanecen fijos mientras el cuerpo se desplaza.

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

Y luego solo apliqué el siguiente CSS:

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

Espero que esto ayude a alguien más.

Recientemente tuve que hacer esto con bootstrap y angularjs, creé una directiva angularjs que resuelve el problema, puedes ver un ejemplo de trabajo y detalles en esta publicación de blog .

Lo usa simplemente agregando un atributo de encabezado fijo a la etiqueta de la tabla:

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

Si no está usando angularjs, puede modificar el javascript de la directiva y usarlo directamente en su lugar.

CSS

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

HTML

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

Esto puede no ser una solución para el recuento de grandes filas. Simplemente uso el truco de la tabla de duplicación para hacer lo que se necesita para la tabla de recuento de filas pequeñas, mientras que puede mantener el ancho de la columna flexible, puedes probar este violín .

(La columna de ancho fijo es el método que uso para la tabla de recuento de filas grandes que requiere solo la duplicación de la fila del encabezado)

Código de muestra:

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

Pon la tabla en un div y dale a ese div la clase pre-scrollable.

Recientemente tuve un problema similar y terminé solucionándolo usando una mezcla de diferentes soluciones.

La primera y más simple fue usar dos tablas, una para los encabezados y otra para el cuerpo. Esto funciona pero los encabezados y las columnas del cuerpo no están alineados. Y, dado que quería usar el tamaño automático que viene con las tablas de arranque de Twitter, terminé creando una función Javascript que cambia los encabezados cuando: se representa el cuerpo; las ventanas cambian de tamaño; los datos en la columna cambian, etc.

Aquí hay algunos de los códigos que utilicé:

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

Los encabezados y el cuerpo se dividen en dos tablas separadas. Uno de ellos está dentro de un DIV con el estilo necesario para generar las barras de desplazamiento verticales. Aquí está el CSS que utilicé:

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

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

Comenté la altura aquí porque quería que la tabla llegara al final de la página, cualquiera que sea la altura de la página.

Los atributos de clasificación de datos que utilicé en los encabezados también se utilizan en cada td. De esta manera podría obtener el ancho y el relleno de cada td y el ancho de la fila. Usando los atributos de clasificación de datos que configuré usando CSS, el relleno y el ancho de cada encabezado en consecuencia y de la fila del encabezado, que siempre es más grande ya que no tiene una barra de desplazamiento. Aquí está la función usando 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

Aquí supongo que tiene una serie de encabezados llamados @headers.

No es bonito pero funciona. Espero que ayude a alguien.

Todas las soluciones anteriores también hacen que el encabezado de la tabla se desplace ... Si solo desea desplazar tbody, aplique esto:

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

Ninguna de estas respuestas funcionó satisfactoriamente para mí. No arreglaron la fila de encabezado de la tabla en su lugar o requirieron anchos de columna fijos para trabajar, e incluso entonces tendieron a desalinear la fila de encabezado y las filas del cuerpo en varios navegadores.

Recomiendo morder la viñeta y usar un control de cuadrícula adecuado como jsGrid o mi favorito personal, SlickGrid . Obviamente, introduce una dependencia, pero si desea que sus tablas se comporten como cuadrículas reales con soporte para navegadores cruzados, esto le ahorrará el pelo. También le da la opción de ordenar y cambiar el tamaño de las columnas, además de toneladas de otras características si lo desea.

Re sugerencia de Jonathan Wood. No tengo la opción de ajustar las tablas con un nuevo div ya que estoy usando un CMS. Usando JQuery esto es lo que hice:

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

Esto envuelve los elementos de la tabla con un nuevo div con la clase "table-overflow".

Luego puede simplemente agregar la siguiente definición en su archivo css:

.table-overflow { overflow: auto; }     

coloque la tabla dentro del div para hacer una tabla desplazable verticalmente. cambie overflow-ya overflow-xpara hacer que la tabla se pueda desplazar horizontalmente. solo overflowpara hacer que la mesa se pueda desplazar tanto horizontal como verticalmente.

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

Pensé que publicaría aquí ya que no podía hacer que ninguno de los anteriores funcionara con Bootstrap 4. Encontré esto en línea y funcionó perfectamente para mí ...

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

También he adjuntado el jsfindle de trabajo.

https://jsfiddle.net/jgngg28t/

Espero que ayude a alguien más.