jquery - thead - tabla con scroll horizontal bootstrap

Twitter Bootstrap filas de tablas desplazables y encabezado fijo

Question

¿Alguien sabe cómo hacer una tabla con una fila de encabezado fijo y filas de cuerpo desplazables? Estoy usando twitter bootstrap si eso es importante.

Este es un ejemplo de lo que intento crear:

http://www.siteexperts.com/tips/html/ts04/page1.asp

Todos los ejemplos que he visto lo dividen en dos tablas separadas. Me preguntaba si alguien tiene una solución más elegante.

Twitter bootstrap también ajusta automáticamente el tamaño de las columnas en función del contenido, por lo que esa es otra razón por la que me gustaría mantenerlo en una sola tabla.

Answer 1

Aquí hay un plugin jQuery que hace exactamente eso: http://fixedheadertable.com/

Uso:

$(''selector'').fixedHeaderTable({ fixedColumn: 1 });

Establezca la opción fixedColumn si desea que también se fije una cantidad de columnas para el desplazamiento horizontal.

EDITAR: Este ejemplo http://www.datatables.net/examples/basic_init/scroll_y.html es mucho mejor en mi opinión, aunque con DataTables necesitarás obtener una mejor comprensión de cómo funciona en general.

EDIT2: Para que Bootstrap trabaje con DataTables, debe seguir las instrucciones aquí: http://datatables.net/blog/Twitter_Bootstrap_2 (He probado esto y funciona) - Para Bootstrap 3 hay una discusión aquí: http://datatables.net/forums/discussion/comment/53462 - (No lo he probado)

Answer 2

Interesante pregunta, intenté hacer esto simplemente haciendo una fila de posición fija, pero esta parece ser una mucho mejor. Fuente en la parte inferior.

css

thead { display:block; background: green; margin:0px; cell-spacing:0px; left:0px; }
tbody { display:block; overflow:auto; height:100px; }
th { height:50px; width:80px; }
td { height:50px; width:80px; background:blue; margin:0px; cell-spacing:0px;}

html

<table>
    <thead>
        <tr><th>hey</th><th>ho</th></tr>
    </thead>
    <tbody>
        <tr><td>test</td><td>test</td></tr>
        <tr><td>test</td><td>test</td></tr>
        <tr><td>test</td><td>test</td></tr>
</tbody>

http://www.imaputz.com/cssStuff/bigFourVersion.html

Answer 3

Solo apile dos tablas de arranque; uno para columnas, el otro para contenido. Sin complementos, solo bootstrap puro (y eso no es ningún bs, jaja!)

  <table id="tableHeader" class="table" style="table-layout:fixed">
        <thead>
            <tr>
                <th>Col1</th>
                ...
            </tr>
        </thead>
  </table>
  <div style="overflow-y:auto;">
    <table id="tableData" class="table table-condensed" style="table-layout:fixed">
        <tbody>
            <tr>
                <td>data</td>
                ...
            </tr>
        </tbody>
    </table>
 </div>

Demo JSFiddle

La tabla de contenido div necesita overflow-y:auto , para barras de desplazamiento vertical. Tuve que usar table-layout:fixed , de lo contrario, las columnas no se alineaban. Además, tuve que poner todo dentro de un panel de arranque para eliminar el espacio entre las tablas.

No se ha probado con anchos de columna personalizados, pero siempre que mantenga los grosores consistentes entre las tablas, debería funcionar.

    // ADD THIS JS FUNCTION TO MATCH UP COL WIDTHS
    $(function () {

        //copy width of header cells to match width of cells with data
        //so they line up properly
        var tdHeader = document.getElementById("tableHeader").rows[0].cells;
        var tdData = document.getElementById("tableData").rows[0].cells;

        for (var i = 0; i < tdData.length; i++)
            tdHeader[i].style.width = tdData[i].offsetWidth + ''px'';

    });

Answer 4

<table class="table table-striped table-condensed table-hover rsk-tbl vScrollTHead">
            <thead>
            <tr>
                <th>Risk Element</th>
                <th>Description</th>
                <th>Risk Value</th>
                <th>&nbsp;</th>
            </tr>
            </thead>
        </table>
<div class="vScrollTable">
            <table class="table table-striped table-condensed table-hover rsk-tbl vScrollTBody">
                <tbody>
                <tr class="">
                    <td>JEWELLERY</td>
                    <td>Jewellery business</td>

                </tr><tr class="">
                    <td>NGO</td>
                    <td>none-governmental organizations</td>
                    </tr>
                </tbody>
            </table>
        </div>





.vScrollTBody{
  height:15px;
}

.vScrollTHead {
  height:15px;
}

.vScrollTable{
  height:100px;
  overflow-y:scroll;
}

tener dos mesas para cabeza y cuerpo trabajadas para mí