descargar - void(0) javascript href
Mesa desplazable bidimensional (2)
Tengo una gran tabla HTML que contiene datos. Los datos se identifican por el encabezado (columnas) y la primera columna. Nos gustaría que el encabezado Y la primera fila permanezcan mientras el contenido es desplazable. Similar a lo que todos los complementos de "tabla desplazable" (es decir, http://www.tablefixedheader.com/demonstration/, que funciona pero no cambia el tamaño correctamente) lo hacen ... pero en dos dimensiones. En Excel, esto se puede lograr dividiendo y arreglando los paneles.
El ancho / alto de las celdas es dinámico.
Cualquier sugerencia es apreciada también si tiene un enlace a un sitio que implementa algo como esto.
Espero que esto ayude.
<table class="table table-scrollable">
<thead>
<tr>
<th class="col-xs-2">#</th>
<th class="col-xs-8">Name</th>
<th class="col-xs-2">Points</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-xs-2">1</td>
<td class="col-xs-8">Name1</td>
<td class="col-xs-2">23</td>
</tr>
<tr>
<td class="col-xs-2">2</td>
<td class="col-xs-8">Name2</td>
<td class="col-xs-2">44</td>
</tr>
<tr>
<td class="col-xs-2">3</td>
<td class="col-xs-8">Name2</td>
<td class="col-xs-2">86</td>
</tr>
<tr>
<td class="col-xs-2">4</td>
<td class="col-xs-8">Name3</td>
<td class="col-xs-2">23</td>
</tr>
<tr>
<td class="col-xs-2">5</td>
<td class="col-xs-8">Name4</td>
<td class="col-xs-2">44</td>
</tr>
<tr>
<td class="col-xs-2">6</td>
<td class="col-xs-8">Name5</td>
<td class="col-xs-2">26</td>
</tr>
</tbody>
</table>
Estas clases de columna col-xs-* son de la biblioteca de arranque para asignar cierta dimensión a las columnas de la tabla.
Este es el estilo css correspondiente
.table-scrollable thead {
width: 97%;
}
.table-scrollable tbody {
height: 230px;
overflow-y: auto;
width: 100%;
}
.table-scrollable thead, .table-scrollable tbody, .table-scrollable tr, .table-scrollable td, .table-scrollable th {
display: block;
}
.table-scrollable tbody td, .table-scrollable thead > tr> th {
float: left;
border-bottom-width: 0;
}
Esta es una toma solo por curiosidad y no estoy seguro de que te quede bien, de todos modos:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
table.sort_table {padding:0;margin:0;width:478px;font-size:12px;font-family:Arial, Helvetica, sans-serif;border-top:1px solid #ccc;border-left:1px solid #ccc;}
table.sort_table tr td, table tr th {text-align:left;border-bottom:1px solid #ccc;border-right:1px solid #ccc;padding:4px;vertical-align:top;}
table.sort_table tr.first_row td {color:red;}
table.sort_table tr td.data_content {padding:0;}
table.data_table {border:0;}
table.data_table tr td {border-bottom:1px solid #ccc;border-right:1px solid #ccc;}
table.data_table tr td.last {border-right:0;}
table.data_table tr.last td {border-bottom:0;}
.scroller {max-height:100px;overflow:auto;}
.tdid {width:50px;}
.tdname {width:200px;}
.tdmail {width:200px;}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" class="sort_table">
<tr>
<th class="tdid">Id</th>
<th class="tdname">Name</th>
<th class="tdmail">Email</th>
</tr>
<tr class="first_row">
<td>Uid</td>
<td>User name</td>
<td>User email</td>
</tr>
<tr>
<td colspan="3" class="data_content">
<div class="scroller">
<table cellpadding="0" cellspacing="0" width="100%" class="data_table">
<tr>
<td class="tdid">Uid</td>
<td class="tdname">User name</td>
<td class="last">User email</td>
</tr>
<tr>
<td>Uid</td>
<td>User name</td>
<td class="last">User email</td>
</tr>
<tr>
<td class="tdid">Uid</td>
<td class="tdname">User name</td>
<td class="last">User email</td>
</tr>
<tr>
<td>Uid</td>
<td>User name</td>
<td class="last">User email</td>
</tr>
<tr>
<td class="tdid">Uid</td>
<td class="tdname">User name</td>
<td class="last">User email</td>
</tr>
<tr>
<td>Uid</td>
<td>User name</td>
<td class="last">User email</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
El truco es anidar la tabla de datos dentro de la tabla de clasificación. Dado que overflow: scroll o auto no funcionará en td, tiene que poner un div con overflow configurado en automático entre medias. El único inconveniente es que tendrá que establecer el ancho td fijo o de lo contrario las segundas celdas de la tabla no se alinearán bien. Usa la altura máxima para limitar la altura de data_content (tenga en cuenta que necesitará la corrección css para ie6 para hacer que la altura máxima funcione, pero se puede hacer).
Funciona desde ie7 + encendido y si tuviera tiempo también podría hacerlo por ie6.