Detener el resize de toda la página cuando ocurre un nowrap

tistklehoff · #1 (**permalink**) 18/08/2009, 06:41

Hola.

Lo primero, presentarme en este foro en el que espero poder tanto dar la lata a los que más saben como aportar lo (poco) que pueda aquí.

Y como siempre que llega uno nuevo tiene alguna pregunta que hacer, no voy a ser menos y aquí os la dejo.

Espero poder explicarme correctamente:

Vereis, tengo una página web de este tipo:

Código:

<html>
	<body>
		<div 	style='min-width: 100px; width: 100%; width: expression(document.body.clientWidth < 100? "100px" : "auto");'>
				<table id="tabla1" style="white-space: nowrap; background-color: yellow; width: 100%;">
					<thead>
						<tr>
							<th>aaaaa
							</th>
							<th>bbbbb
							</th>
							<th>cccc
							</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>aaaaa</td>
							<td>bbbbb</td>
							<td>ccccc</td>
						</tr>
						<tr>
							<td>xxxx</td>
							<td>yyyy</td>
							<td>zzzz</td>
						</tr>						
				</table>
				
				<table id="tabla2" style="white-space: nowrap; background-color: red; width: 100%;">
					<tbody>
						<tr>
							<td>ttttttttttttttttttt</td>
							<td>uuuuuuuuuuu</td>
							<td>kkkkkkkkkkk</td>
							<td>ppppppppppp</td>
						</tr>
						<tr>
							<td>ttttttttttttttttttt</td>
							<td>uuuuuuuuuuu</td>
							<td>kkkkkkkkkkk</td>
							<td>ppppppppppp</td
						</tr>						
					</tbody>
				</table>				
		</div>
		<div style="width: 100%; background-color: silver;">
			Resto de la p&aacute;gina XXXXXXXXXXXXX XXXXXXXXXX XXXXXXX XXXXXXXXX XXXXXXXXXXXX XXXXX XXXXXXXXXXX XXXXXX XXXX XXXXX
		</div>
	</body>
</html>

Como podeis ver, las tablas disponen de sendos nowrap, con lo que no se hacen más pequeñas al llegar a su límite.

El problema está en que el resto de la página sí que lo hace, es decir, aunque la tabla2 ya haya llegado al límite, si sigo haciendo más pequeña la ventana, la tabla1 se sigue haciendo más pequeña, así como el div inferior con todo su contenido.

¿Hay alguna forma de parar esto, de tal forma que cuando una de las tablas no pueda seguir haciéndose más pequeña, el resto de la página también quede congelada en ese tamaño?
Lo único que se me ocurre es meter todo dentro de una tabla, pero no me gusta la solución

Código:

<table style="white-space: nowrap;">
	<tr>
		<td>

<!-- AQUI TODO EL CUERPO DE LA PAGINA -->

		</td>
	</tr>
</table>

Espero que me hayais entendido.

Muchas gracias a todos.

Un saludo.

kseso? · #2 (**permalink**) 18/08/2009, 07:17

Al igual que has hecho con la primera asignándole un min-width, hazlo con la segunda.
Y por cierto, "white-space" no influye en los tamaños, sino en el tratamiento de los espacios en blanco y si se generan o no nuevas líneas.

Sobre el uso de tablas lo dejamos para otra ocasión (si son o no datos tabulados los que presentas en ellas)

Un saludo y bienvenido a FdW

tistklehoff · #3 (**permalink**) 19/08/2009, 04:14

Hola.

Muchas gracias por la prontísima respuesta.

En realidad, el min-width no debería activarse, porque, para cuando llega al mímimo que le he puesto (en el ejemplo es de 100px, en mi página, algo más) ya se ha producido el resize de las tablas.

Efectivamente, lo que quiero es que las líneas que hay en las tablas no se dividan en varias al hacer la ventana más pequeña, por lo que, llegado el momento, la tabla queda 'bloqueada' en el tamaño mínimo.

Supongo que bastará con un min-width adecuado al contenido de las tablas en un div que englove todo el cuerpo de la página. Lo que pasa es que no sé qué datos me van a venir a la tabla y por lo tanto tendría que ajustar al tiempo que voy pintando (javascript?)

En cuanto a los datos, sí, son varias tablas de datos que aparecen en la página.

Muchas gracias por la ayuda.
Un saludo.