Necesito mostrar datos tabulares usando un table, pero estará dentro de un diseño fluido; Quiero tener un relleno de todo el ancho disponible, pero no expandirlo horizontalmente más allá del ancho de pantalla máximo, de modo que el body no obtenga una barra de desplazamiento horizontal. En cambio, los elementos demasiado grandes td obtendrán la barra de desplazamiento.¿Cómo limito el ancho de la tabla al elemento contenedor (o pantalla)?
En el ejemplo hay DATA en el table, el table tiene border:1px solid black y la salida será para un fácil análisis sintáctico cuando hilo de rizo, así (de ahí el white-space:pre); El div es simplemente el asistente de diseño de CSS normal; si es posible, ¡deshagámonos de eso también!
La parte importante es que esto no será píxel fijo Tipo diseño de ancho, y la table será menor que la anchura disponible en caso los datos no necesita mucho espacio. Para resumir, una tabla simple que simplemente no se ensancha más que la pantalla. Idealmente, el table solo estiraría el elemento parental hasta que se alcance el max-width de ese elemento circundante y luego no se ensanche.
En Chrome, con algo que considero que es un truco mal, que tiene que mantener el table a la anchura máxima disponible y para mostrar las barras de desplazamiento en la td si es necesario. Sin embargo, esto no funciona para FF, ni es una solución que pueda considerarse correcta.
Siguiendo el ejemplo de que se puede encontrar en https://hydra.geht.net/table-quirx.html por un tiempo:
<head>
<title>Obey max-width for table</title>
<style>
.nw { white-space:nowrap }
.quirx div { width:100%; max-width:100%; white-space:pre }
.quirx td { max-width:90px; border:1px solid black }
.quirx td+td { max-width:500px; overflow:auto }
table.quirx { width:100%; max-width:100%; border:1px solid black; border-collapse:collapse }
td { align:left; max-width:100% }
</style>
</head>
<body>
<table summary="" class="quirx"><tr><td colspan="3">
Just some info
</td></tr><tr><td>KEY</td><td><div>DATA (which might contain long lines PRE formatted) XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX </div>
</td></tr></table>
</body>
</html>
Tenga en cuenta que el "colspan = 3" es ningún error aquí, en mi aplicación a veces una tercera columna puede aparecer, esto no puede ser conocido en el momento en que se emite el encabezado table. (Algunas cosas de estilo son redundantes, también.)
El truco anterior, es decir, que el td 's max-width juntos son más pequeñas que la pantalla habitual (590px) y el table continuación, se estira a lo dado width, que es 100% . Como el td s no se extiende más allá de la pantalla, la propiedad divoverflow interior puede funcionar como se esperaba. Sin embargo, en FF no funciona de esta manera, ni con width ni con max-width (que probablemente se deba a su estado inline). En Chrome un width:100% o similar no funciona en los elementos td ni tr. Tenga en cuenta que con max-width uno obtiene un diseño de mesa más agradable que con width (no entiendo esa diferencia).
Además del error que esto sólo funciona en Chrome, otro error es que el table utiliza la pantalla de ancho completo, incluso si eso no es necesario si sólo hay pequeñas datos que se vea.
Algunas notas acerca de que todos:
- Creo que esto aquí es una cosa muy básica y estoy desconcertado por qué parece tan difícil de expresar con CSS
- Un objetivo es mantenerlo libre de cualquier JavaScript, por lo que sólo CSS con hacks
- el usuario puede cambiar el tamaño de la ventana, por ejemplo, de 800px a 1920px o incluso más amplio, y así s ancho de la
table' se ajustará automáticamente (sin Javascript) - será mostrar bien en el texto navegadores basados como
Lynxyw3m, también - de salida no será demasiado desordenada para facilitar el análisis cuando se canaliza desde
curl - Será mostrar más o menos correctamente en el principal 4 (IE, FF, Chrome, Safari)
- no será romper con los demás (puede tener errores de representación, pero el contenido no debe ocultarse)
Realmente no tengo idea de cómo archivar eso. Quizás es una pregunta frecuente, pero no pude encontrar una solución yo mismo.
Esto fue útil. Estoy teniendo problemas y el diseño de la mesa parece estar en juego. Gracias – huyz
Esto es increíblemente útil, gracias amigo –