miércoles, octubre 09, 2013

Ajustar etiqueta td al contenido



Esta vez presento un pequeño problema con el contenido de una tabla, donde el escenario era el siguiente data una tabla X con un solo tr y 3 td teníamos lo siguiente


<table border=1 width=300>
<tr>
<td id="mytd" width=100>LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord</td>
<td width=100>shortWord</td>
<td width=100>shortWord</td>
</tr>
</table>




La imagen muestra que no respeta el tamaño del td, debido a que el texto es demasiado grande, pues bien navegando por la red mi buen amigo @mariof4 y yo encontramos estas propuestas

Propuesta 1

Si aplicamos

<table border=1 width=300 style="table-layout: fixed;" >
y también aplicamos al td que contiene el texto largo un style overflow: hidden; text-overflow: ellipsis; white-space:nowrap;"
<td id="mytd" style="overflow: hidden; text-overflow: ellipsis; white-space:nowrap;"

obtendremos esto:

Propuesta 2

Si aplicamos

<table border=1 width=300 style="table-layout: fixed;" >

y también aplicamos al td que contiene el texto largo un style word-break:break-all


<td id="mytd" style="word-break:break-all;" width=100>

obtendremos esto:




Esto servirá en algún momento y si no sirve pues ahí queda para el archivo

No hay comentarios.:

Publicar un comentario