Supongo que lo que estás intentando hacer es mantener el encabezado fijo y desplazar el contenido del cuerpo. Puede desplazar el contenido en 2 direcciones:
- horizontalmente: no podrá desplazar el contenido horizontalmente a menos que use un control deslizante (un control deslizante de jQuery, por ejemplo). Recomendaría evitar el uso de una mesa en este caso.
- verticalmente: no podrá lograr eso con una
tbody
etiqueta, porque asignar display:block
o display:inline-block
romperá el diseño de la tabla.
Aquí hay una solución usando divs
: JSFiddle
HTML:
<div class="wrap_header">
<div class="column">
Name
</div>
<div class="column">
Phone
</div>
<div class="clearfix"></div>
</div>
<div class="wrap_body">
<div class="sliding_wrapper">
<div class="serie">
<div class="cell">
AAAAAA
</div>
<div class="cell">
323232
</div>
<div class="clearfix"></div>
</div>
<div class="serie">
<div class="cell">
BBBBBB
</div>
<div class="cell">
323232
</div>
<div class="clearfix"></div>
</div>
<div class="serie">
<div class="cell">
CCCCCC
</div>
<div class="cell">
3435656
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
CSS:
.wrap_header{width:204px;}
.sliding_wrapper,
.wrap_body {width:221px;}
.sliding_wrapper {overflow-y:scroll; overflow-x:none;}
.sliding_wrapper,
.wrap_body {height:45px;}
.wrap_header,
.wrap_body {overflow:hidden;}
.column {width:100px; float:left; border:1px solid red;}
.cell {width:100px; float:left; border:1px solid red;}
/**
* @info Clearfix: clear all the floated elements
*/
.clearfix:after {
visibility:hidden;
display:block;
font-size:0;
content:" ";
clear:both;
height:0;
}
.clearfix {display:inline-table;}
/**
* @hack Display the Clearfix as a block element
* @hackfor Every browser except IE for Macintosh
*/
/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */
Explicación:
Tienes un sliding wrapper
que contendrá todos los datos.
Tenga en cuenta lo siguiente:
.wrap_header{width:204px;}
.sliding_wrapper,
.wrap_body {width:221px;}
Hay una diferencia de 17px porque debemos tener en cuenta el ancho de la barra de desplazamiento.