como dar ancho fijo a celda de tabla?

[cristian_cena]

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

[cristian_cena]

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.

[mjlucena]

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.

[emprear]

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:

th, td {
border: 1px solid black;
padding: 4px;
white-space: pre; /* CSS 2.0 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3.0 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP */
word-wrap: break-word; /* IE 5+ */
}
 

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

Saludos