tablas - tabla html5 responsive ejemplos

Tabla HTML: mantenga el mismo ancho para las columnas

Question

Tengo una tabla con varios grupos de columnas. La tabla es más grande que mi página, por lo que tengo un control para mostrar / ocultar algunos de estos grupos para que quepan en la página. La tabla inicial se ve bien: todas las columnas tienen aproximadamente el mismo ancho dentro de un grupo. Pero cuando oculto un grupo, las columnas ya no tienen el mismo ancho y se ven mal.

Ejemplo: http://www.reviews-web-hosting.com/companies/apollohosting.html (enlace roto)

Hasta ahora, la mesa se ve bien. Haga clic en >>. La primera columna en "Ecommerce Pro" es mucho más ancha que las otras columnas en "Ecommerce Pro", parece extraña. Haga clic en <<, esta vez la primera columna en "Valor" es demasiado amplia. Al menos en Firefox.

He intentado usar

<colgroup><col /><col span="5" />...

pero sin suerte. Si configuro un col para style = "display: none", el conjunto de columnas aún se muestra.

¿Alguna sugerencia de HTML / CSS para mantener las columnas con el mismo ancho dentro de un grupo?

Editar:

• para ocultar una columna, tengo que usar la visibilidad: colapsar
• parece que está cambiando de tamaño bien ahora, no sé por qué

Answer 1

En tu caso, ya que solo muestras 3 columnas:

Name Value Business
or
Name Business Ecommerce Pro

¿Por qué no configurar los 3 para tener un ancho de 33.3%? dado que solo se muestran 3 a la vez, el navegador debe mostrar un ancho similar.

Answer 2

Si configura el estilo table-layout: fixed; en su mesa, puede anular el cambio de tamaño automático de la columna del navegador. El navegador establecerá el ancho de las columnas en función del ancho de las celdas en la primera fila de la tabla. Cambie su <thead> a <caption> y elimine el <td> dentro de él, y luego establezca los anchos fijos para las celdas en <tbody> .

Answer 3

bien, ¿por qué no (deshacerte de la barra lateral y) apretar la mesa para que no muestre / oculte el efecto? Me parece extraño ahora. La mesa es muy robusta.
De lo contrario, creo que la sugerencia de scunliffe debería hacerlo. O, si lo desea, puede establecer el ancho exacto de la tabla y establecer el porcentaje o el ancho del píxel para las celdas de la tabla.

Answer 4

darle este estilo a td: ancho: 1%;