Cómo alinear TH Encabezado con TD en TBody

Tengo problemas al intentar insertar una tabla en una página HTML existente con CSS.Cómo alinear TH Encabezado con TD en TBody

Este CSS se esconde la cabecera de la mesa de forma predeterminada con una definición de estilo como:

.tablestuff thead { 
    display: none; 
}

Pero yo quiero la tabla para mostrar, así que traté de seleccionar el estilo en el elemento de la culata en T con "display: bloquear "(con javascript). Eso hace que se muestre el encabezado, pero las columnas del encabezado no se alinean con las columnas td.

He reducido mi HTML a lo siguiente (con suerte con errores ortográficos mínimos) y mostrando el estilo en el elemento thead establecido por javascript.

<div class="tablestuff"> 
<table border="1"> 
<thead style="display:block"> 
<tr> 
<th id="th1" style="width: 20px"></th> 
<th id="th2" style="width: 20px"></th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td headers="th1" style="width: 20px"></td> 
<td headers="th2" style="width: 20px"></td> 
</tr> 
</tbody> 
</table> 
</div>

¿Cómo puedo hacer que el encabezado se muestre y también se alinee correctamente con las columnas td?

Fuente

2012-08-28 George Hernando

Debe establecer simplemente '[culata en T] .style .display = "" 'en javascript si solo quieres mostrarlo. El valor predeterminado de 'display' de' thead' es 'table-header-group', no' block'. – Passerby

no entiende su pregunta? ¿Cuál es el problema? – diEcho

aquí hice un filddle. http://jsfiddle.net/ZbdZe/1/ – diEcho

CSS incluye más modos de visualización que el comúnmente utilizado none, inline, inline-block y block. Hay quite a few, de hecho.

En este caso, parece que lo que desea utilizar en lugar de display:block; es display:table-header-group;.

Éstos son algunos ejemplos de los diferentes estilos, tal como se aplica a su mesa:

http://jsfiddle.net/CrYdz/1

Fuente

2012-08-28 05:23:26 aroth

Qué suspiro de alivio cuando tropecé con este fragmento de CSS. Nunca utilicé o cuidé mucho de 'thead' hasta el día de hoy y he estado usando elementos' table' desde 1997. La plataforma en la que estoy programando estaba configurando la pantalla predeterminada para 'thead' a' display: block; '. Gracias a Dios (y muchas gracias) –

Cuando se quiere mostrar el elemento de la culata en T usa este valor: display: table-header-group;

Fuente

2012-08-28 05:22:52

Lo probé, pero el efecto es el mismo. Cuando configuro theadelement.style.display = 'table-row', todos los elementos del encabezado se vuelven visibles, pero no se muestran sobre las filas del tbody. Todos se muestran en la primera columna de tbody. –

Gracias. Esta funcionando. –

El problema es causado por el display:block en el atributo de estilo para la culata en T.

cambiarlo a display:table-header-group

Fuente

2012-08-28 05:23:40

Tal vez el contenido de la THs es más ancho que el contenido de la TDS y, en realidad, el ancho no se 20px como conjunto.

Por lo tanto, como primero carga la página sin thead, la tabla obtiene el ancho de los TD. Luego, cuando visualiza THEAD por js, el ancho de la mesa continúa siendo el mismo, pero probablemente los TH tengan un ancho diferente.

Fuente

2012-08-28 05:24:36

-1

mostrar y ocultar º lugar de la culata en T con el css

/* to hide */ 
.tablestuff thead th{ 
    display: none; 
} 

/* to show */ 
.tablestuff thead th{ 
    display: table-cell; 
}

Fuente

2012-08-28 05:25:28

Para establecer misma anchura de cabecera de la tabla y el cuerpo de la tabla en la tabla:

<table style="table-layout:fixed">

Fuente

2014-11-18 11:27:15

Cómo alinear TH Encabezado con TD en TBody

Respuesta

Cuestiones relacionadas