Foros del Web » Creando para Internet » HTML »

como dar ancho fijo a celda de tabla?

Estas en el tema de como dar ancho fijo a celda de tabla? en el foro de HTML en Foros del Web. Hola foreros, resulta que estoy armando una tabla cuyo fin es el de ser impresa, lo cual llevo a cabo con un css media="print" Bien, ...
  #1 (permalink)  
Antiguo 29/10/2010, 16:57
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
como dar ancho fijo a celda de tabla?

Hola foreros, resulta que estoy armando una tabla cuyo fin es el de ser impresa, lo cual llevo a cabo con un css media="print"

Bien, por una cuestion de presentacion en página necesito controlar el ancho de las celdas en contraposición del comportamiento habitual de las celdas que se adaptan al contenido que posean.

teniendo este html:

<table>
<tr>
<td class="celda1">contenido123456789</td> <td>celda 2</td> <td> celda n</td>
</tr>
</table>

¿como puedo hacer para dar un width de por ejemplo 50px a la celda y que el contenido que sobrepase estos 50px se valla colocando en la línea de abajo?

Desde ya muchas gracias de antemano.

Cualquier cosa no halla sido suficiente la explicacion por favor avisen y me explico mejor.

Saludos
  #2 (permalink)  
Antiguo 29/10/2010, 17:49
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: como dar ancho fijo a celda de tabla?

Bueno, encontre un modo de resolver el problema:

<td><div style="overflow:hidden"> tambien podria ser overflow:scroll</div></td>

pero lo más efectivo que encontré y de hecho como lo hice es usando javascript y el método split(''); para cortar cadenas.

Ej: para la celda en donde se muestran los emails:

<script type="text/javascript">
cadena = '[email protected]';
cadena = cadena.split('@');
document.write(cadena[0]+'<br/>@'+cadena[1]);
</script>

Y así sucesivamente, con los demás campos pasando otro parametro en vez de la arroba.

Si alguien encuentra una solución más óptima que esta le agradecería que la exponga.

Saludos.
  #3 (permalink)  
Antiguo 30/10/2010, 11:54
Avatar de mjlucena  
Fecha de Ingreso: octubre-2010
Ubicación: Madrid
Mensajes: 19
Antigüedad: 7 años, 1 mes
Puntos: 1
Respuesta: como dar ancho fijo a celda de tabla?

Creo que no hace falta tanto.
Si le das un ancho fijo a la tabla y a la celda que quieres limitar, el texto bajará a la línea siguiente sin problemas.

<table width="xxx">
<tr>
<td class="celda1" width="xxx">contenido123456789</td> <td>celda 2</td> <td> celda n</td>
</tr>
</table>

Si las otras dos celdas las dejas sin ancho se adaptarán.

Última edición por webosiris; 30/10/2010 a las 12:06
  #4 (permalink)  
Antiguo 30/10/2010, 12:58
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: como dar ancho fijo a celda de tabla?

El secreto pasa por hacer un ajuste exacto del texto en las celdas,
el siguiente ejemplo te funciona en todos los navegadores modernos.


mira los siguientes ejemplo

http://foros.emprear.com/html/tbody_scroll2.html
http://foros.emprear.com/html/word-w...en-celdas.html

la parte que te concierne en particular es el css

Código CSS:
Ver original
  1. th, td {
  2. border: 1px solid black;
  3. padding: 4px;
  4. white-space: pre; /* CSS 2.0 */
  5. white-space: pre-wrap; /* CSS 2.1 */
  6. white-space: pre-line; /* CSS 3.0 */
  7. white-space: -pre-wrap; /* Opera 4-6 */
  8. white-space: -o-pre-wrap; /* Opera 7 */
  9. white-space: -moz-pre-wrap; /* Mozilla */
  10. white-space: -hp-pre-wrap; /* HP */
  11. word-wrap: break-word; /* IE 5+ */
  12. }

Debiendo obviamente, definir un tamaño en pix o pt para los elementos

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.

Etiquetas: ancho, celda, dar, fijo, tablas
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 01:31.