Foros del Web » Creando para Internet » CSS »

TD que salten de línea

Estas en el tema de TD que salten de línea en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 03/12/2008, 10:49
 
Fecha de Ingreso: octubre-2005
Mensajes: 19
Antigüedad: 12 años, 2 meses
Puntos: 0
TD que salten de línea

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 ;)
  #2 (permalink)  
Antiguo 03/12/2008, 12:13
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: TD que salten de línea

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.
  #3 (permalink)  
Antiguo 04/12/2008, 10:07
 
Fecha de Ingreso: octubre-2005
Mensajes: 19
Antigüedad: 12 años, 2 meses
Puntos: 0
Respuesta: TD que salten de línea

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
  #4 (permalink)  
Antiguo 04/12/2008, 10:31
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Respuesta: TD que salten de línea

y talvez con algo facil
Código HTML:
table {table-layout: fixed;
text-align: justify;
}
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #5 (permalink)  
Antiguo 04/12/2008, 10:34
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
De acuerdo Respuesta: TD que salten de línea

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
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:05.