TD que salten de línea

[aortiz_endirecto]

Buenas tardes,

La cuestión que me invade es que tengo un div con una tabla de una fila y n columnas. El ancho del div es 500px y con n filas al poner texto en cada columna no me respeta el ancho del div contenedor y se sigue ensanchando.

A mi gustaría que al llegar al ancho del div los td se comportaran como elementos en línea y saltaran a la línea siguiente.


¿Esto se puede hacer con la propiedad display:inline aplicada a los td de la tabla??

Éste es el código

CSS:

Código:

<style type="text/css">
.contenedor {width:500px;background:#CCCCCC;}
table.prueba td{display:inline;background:yellow;}
</style>

HTML:

Código:

<div class="contenedor">
	<table class="prueba">
		<tr>
			<td >asdfjkñadjsfhañdkfjhañd</td>
			<td >asdfjkñadjsfhañdkfjhañd</td>
			<td >asdfjkñadjsfhañdkfjhañd</td>
			<td >asdfjkñadjsfhañdkfjhañd</td>
			<td >asdfjkñadjsfhañdkfjhañd</td>
			<td >asdfjkñadjsfhañdkfjhañd</td>
			<td >asdfjkñadjsfhañdkfjhañd</td>
			<td >asdfjkñadjsfhañdkfjhañd</td>
		</tr>
	</table>
</div>

Muchas gracias y un saludo a todos ;)

[willyfc]

lo que pasa es que lo ves así por que estas escribiendo palabras muy largas sin espacios aumentale un espacio al final de cada palabra y verás:

Código:

<style type="text/css">
.contenedor {width:500px;background:#CCCCCC; padding:5px}
.prueba td{display:inline;background:yellow; }
</style>

Código HTML:

<div class="contenedor">
	<table class="prueba">
		<tr>
			<td style="border:1px solid #000000">asdfjkñadjsfhañdkfjhañd </td>
			<td style="border:1px solid #000000">asdfjkñadjsfhañdkfjhañd </td>
			<td style="border:1px solid #000000">asdfjkñadjsfhañdkfjhañd </td>
			<td style="border:1px solid #000000">asdfjkñadjsfhañdkfjhañd </td>
			<td style="border:1px solid #000000">asdfjkñadjsfhañdkfjhañd </td>
			<td style="border:1px solid #000000">asdfjkñadjsfhañdkfjhañd </td>
			<td style="border:1px solid #000000">asdfjkñadjsfhañdkfjhañd </td>
			<td style="border:1px solid #000000">asdfjkñadjsfhañdkfjhañd </td>
		</tr>
	</table>
</div> 

cuando pones palabras sin separación de espacios todo se abre incluyendo las cajas que solo son hechas con divs o este cuadro donde escribimos nuestros mensajes.

avisas como te va.

[aortiz_endirecto]

Gracias por interesarte por el tema willyfc,


Me sigue pasando lo mismo, cuando empieza a aumentar el ancho de la tabla y llega a los 500px de ancho del div, no hace el salto de línea.

Te comento el caso práctico:

Estoy trabajando con un menu horizontal en una aplicación para MOSS 2007. La maqueta html que hize el menú es una lista horizontal que quedó como yo quería, pero al adaptar el menú a la aplicación de sharepoint 2007 se tubo que hacer este menú con una tabla con n columnas (elementos del menu) dentro de un div.

Lo que pasa es que al empezar a crecer el número de elementos del menú crece el número de td y al sobrepasar el ancho del div que la contiene, o bien se expande el div que la contiene en ie6 o va creciendo hacia la derecha en ie7 sólo el menú.

Yo lo que quería es que al llegar al ancho del div las columnas de la tabla se comportaran como elementos en línea y el menú siguiera en dos líneas sin romperme el ancho del div.

La cosa que quiero hacer es un poco rara por eso el motivo de este post.

Muchas gracias

[gVenom]

y talvez con algo facil

Código HTML:

table {table-layout: fixed;
text-align: justify;
}

[gVenom]

Tambien puedes usar algo así:

Código HTML:

<style type="text/css" media="all">
    .salto {
    font-size:11px;
    font-family: Verdana;
    margin-bottom: 25px;
}
</style> 

y en margin-bottom le pones el valor que tu ocupas