El encabezado y el cuerpo de la tabla no se alinean correctamente cuando el encabezado de la tabla se congela mediante CSS

Tengo una tabla del siguiente formato cuando trato de arreglar su cabeza usando el siguiente CSS, estoy perdiendo la alineación, el encabezado y el cuerpo de la tabla no se alinean correctamente … ¿Qué puedo hacer para superar esto?

#ex_table { table-layout: fixed !important; } #ex_table thead tr { position: fixed !important; } 

Aquí está la parte HTML

 
/*thead and tbody populated dynamically via jquery datatables*/

Debes establecer el ancho de tus celdas estrictamente:

th, td {ancho: 30px}

Establezca el ancho de su fila como el ancho de la tabla:

 #ex_table thead tr { width:98%; position: fixed !important; } 

La respuesta no es tan simple, necesita mucho trabajo. position: fixed no funciona como se esperaba al trabajar con la tabla, por lo que necesitará otro enfoque

Aquí hay un JSFiddle que reuní de un poco de búsqueda en la web, http://jsfiddle.net/UWS6N/1/

También encontré esto en Stackoverflow, es una pregunta ya respondida e involucra algo de jQuery , personalmente soy fanático de hacer cosas como esta con CSS porque es más rápido.

El encabezado de la tabla permanece fijo en la parte superior cuando el usuario lo desplaza fuera de la vista con jQuery

Además, por favor, reserve tags

solo para la fila del encabezado, usar

como contenedor para esa fila específica ayudará con la legibilidad del código, colocarlas en el

es una violación de las normas (un poco dura esta expresión que sé , pero soy un defensor de los estándares y tiendo a ponerme un poco nervioso cuando veo código incorrecto, probablemente sea solo yo)

El posicionamiento fijo mantiene un elemento en el mismo lugar en la ventana gráfica sin importar en qué parte de la página se encuentre el usuario. Por lo tanto, si usa esta propiedad en los TR, todos se astackn en la esquina superior izquierda de la ventana gráfica (ventana del navegador).

Combiné la solución probada por @RomanTheGreat y @Smiter, y escribí un CSS como se indica a continuación … Aunque la alineación no es prefecta de tono. Esto casi me lleva allí.

 #ex_table { table-layout: fixed !important; } #ex_table thead tr { width:500px !important; position: fixed !important; } #ex_table tbody tr { width:500px!important; } #ex_table th, td { width:100px; }