css only - Desbordamiento de tabla con encabezado fijo

Question

Estoy intentando crear una tabla que se puede desplazar en las direcciones xey si el contenido es más grande que el contenedor. También quiero que el encabezado siempre esté visible en la parte superior. Tengo la primera parte en funcionamiento, y el encabezado siempre está visible en la parte superior, sin embargo, los tamaños de columna del encabezado no coinciden con los tamaños de tabla de la tabla.

he creado esta violín:

http://jsfiddle.net/xxQQS/1/

estoy después de una única solución CSS.

EDITAR: Parece que hay bastantes personas que parecen pensar que esto no solo se puede hacer con CSS. Esto puede ser cierto, sin embargo, no solo publique para decir 'no, esto no se puede hacer'. Si puede explicar por qué esto no se puede hacer sin CSS, aceptaré su respuesta.

Answer 1

Crea un clon de tu mesa. Para la primera tabla, oculte todas las filas excepto las cabeceras usando visibility: hidden. Oculte el encabezado de la otra tabla usando visibility: hidden. Coloque sus tablas dentro de los divs con las propiedades de desbordamiento establecidas de la siguiente manera:

<div style="overflow-x: hidden; width: 400px;"> 
    <div style="overflow-y: hidden; height: 20px;"> 
     <table id="head-only"> 
     </table> 
    </div> 
    <div style="overflow-y: scroll; height: 100px;"> 
     <table id="body-only"> 
     </table> 
    </div> 
</div> 

Answer 2

Puede ser por esto, usted debe usar JS. Comprueba esto http://www.tablefixedheader.com/