No consigo fijar el ancho de una tabla

[ulises20100]

Tengo una tabla que incluye una lista de enlaces y no consigo que la tabla se quede con ancho fijo y las celdas con las URL se 'desparraman'

Podeís verlo aquí:

http://colpolsocmadrid.org/otros-servicios/calendario-anual-de-becas-y-premios/

He intentado usar <table style="table-layout:fixed;" width="500px"> pero no hay manera.... ¿Alguien puede echarme una mano por favor?

Gracias

[Sarlit]

Prueba con <table style="width:500px">

[fede5426]

Con eso o poniendole un ancho fijo a la columna enlaces..

<td style="width=150px"></td>

[ulises20100]

Muchísimas gracias a los dos, pero no me ha dado resultado.

Para hacerlo un poco más fácil he creado una tabla al principio de la página:

http://colpolsocmadrid.org/otros-servicios/calendario-anual-de-becas-y-premios/

con unas cuantas celdas para ver el comportamiento. He puesto este código:

Código:

<strong>P</strong>
<table style="width:500px">
<tbody>
<tr>
<td style="width:125px;"><strong>Becas</strong></td>
<td style="width:125px;"><strong>Organización</strong></td>
<td style="width:125px;""><strong>Fecha</strong></td>
<td style="width=125px"><strong>Enlace</strong></td>
</tr>
<tr>
<td style="width=125px">Becas de Investigación</td>
<td style="width=125px">Banco de España</td>
<td style="width=125px">31-ene</td>
<td style="width=125px"><a href="http://www.bde.es/bde/es/secciones/convocatorias/Becas/">http://www.bde.es/bde/es/secciones/convocatorias/Becas/</a></td>
</tr>
<tr>
<td style="width=125px">Convocatoria PERMANENTE para proyectos de investigación</td>
<td style="width=125px">Instituto Nacional de la Administración Pública</td>
<td style="width=125px">Todo el año</td>
<td style="width=125px"><a href="http://www.inap.es/convocatoria-permanente">http://www.inap.es/convocatoria-permanente</a></td>
</tr>
<tr>
<td style="width=125px">Convocatoria de Becas para estudios monográficos sobre Seguridad y Salud Laboral</td>
<td style="width=125px">Junta de Castilla y León</td>
<td style="width=125px">24-ene</td>
<td style="width=125px"><a href="https://www.tramitacastillayleon.jcyl.es/web/jcyl/AdministracionElectronica/es/Plantilla100Detalle/1%20251181055331/_/1284298698386/Propuesta">https://www.tramitacastillayleon.jcyl.es/web/jcyl/AdministracionElectronica/es/Plantilla100Detalle/1</a>
<a href="https://www.tramitacastillayleon.jcyl.es/web/jcyl/AdministracionElectronica/es/Plantilla100Detalle/1%20251181055331/_/1284298698386/Propuesta">251181055331/_/1284298698386/Propuesta</a></td>
</tr>
<tr>
<td style="width=125px">Convocatoria Becas Rafael del Pino</td>
<td style="width=125px">Fundación Rafal del Pino &amp; Instituto Cervantes</td>
<td style="width=125px">09-ene</td>
<td style="width=125px"><a href="http://www.frdelpino.es/xiii-programa-de-becas-para-estudios-de-posgrado/">http://www.frdelpino.es/xiii-programa-de-becas-para-estudios-de-posgrado/</a></td>
</tr>
<tr>
<td style="width=125px">Convocatoria Becas de Formación Archivística</td>
<td style="width=125px">Cortes Valencianas</td>
<td style="width=125px">09-ene</td>
<td style="width=125px"><a href="http://www.cortsvalencianes.es/cs/Satellite/Layout/Oposicionybeca_C/1286308397333/Detalle.html?lang=es_ES&amp;p=1260974741464">http://www.cortsvalencianes.es/cs/Satellite/Layout/Oposicionybeca_C/1286308397333/Detalle.html?lang=es_ES&amp;p=1260974741464</a></td>
</tr>
</tbody>
</table>
&nbsp;

y como podeis ver en la página todo sigue desordenado

[C2am]

Hola
Primero fijate que no es:

Código HTML:

<td style="width=125px">
 

Sino:

Código HTML:

<td style="width:125px">
 

Segundo, creo que con poner el ancho en las celdas cabecera esto hará que toda la columna tenga ese ancho y no otro, con lo cual te ahorras mucho código.

Tercero, que tendría que haber sido el 2º, es que pon los estilos en un css no inline, sobre todo cuando tratas con tablas, ya que corregir o modificar cada estilo en cada celda es un martirio.

Cuarto, el verdadero problema lo tienes por la cadena tan extensa en "enlace" que al fijar el ancho de la tabla en 500px, hace que las otras celdas no tenga más remedio que achicarse. O sea, por más que le pongas que deben tener un ancho de 125, el tipo grandote y malo les dice que se corran.

Esto lo puedes corregir de varias formas, pero como estamos en el foro de css:

Código CSS:

td{
    width:120px;
    white-space: nowrap;
}
 

Aquí el ejemplo:http://jsfiddle.net/c2am/qj857goq/2/embedded/result/
Saludos

[fede5426]

Mmm.. me parece q ya se por donde viene la mano. Como el navegador no es un procesador de texto, al tener una palabra mas larga que la celda (en este caso un enlace), lo que hace es sacarla de la celda en vez de continuarla en el renglón de abajo.

Proba poniendo esto en los estilos de la tabla:

{
max-width:500px;
overflow:hidden;
word-wrap:break-word;
}

El "word-wrap:break-word" lo que hace es cortar las palabras largas, colocar un guion y seguir la palabra debajo, como lo harías escribiendo en un cuaderno. Lo que no estoy seguro es si los enlaces seguirían funcionando de la misma manera. Intenta con eso, con suerte se soluciona.

[C2am]

Sí, tal cual, antes dije una burrada, es word-wrap:break-word; y no white-space: nowrap;

[fede5426]

Sino otra solucion que puede haber, que no creo que sea la mejor pero te puede sacar del apuro, es colocar una palabra que te lleve al enlace..

Me explico con un ejemplo, tu primer renglon de la tabla:

Código HTML:

<tr>
   <td>Becas de investigacion</td>
   <td>Banco de España</td>
   <td>31-ene</td>
   <td><a href="http://www.bde.es/bde/es/secciones/convocatorias/Becas/">Becas</a></td>
</tr> 

Si no funciona lo del word-wrap, esto es lo unico que se me ocurre por el momento jaja espero que te sea de ayuda.. saludos.

[ulises20100]

Muchas gracias por vuestra ayuda, pero no hay modo

He reducido la tabla de ejemplo para aclarar las cosas.

He puesto los atributos solo en los td de cabecera porque efectivamente debería afectar a toda la columna.

Tengo que poner los estilos en inline porque es una página que editan mi cliente y debería ser algo puntual, ha copiado la tabla del Word y la ha pegado, y claro, le queda como el culo y quiero solucionarlo de modo rápido y no quiero andar creando reglas (pensé en principio que así sería más fácil)

La única idea más o menos factible me parece lo de cambiar los enlaces por una palabra, pero bueno, era por si encontrabamos una solución.... en cualquier caso muchas gracias y si se os ocurre algo más.... porque la he puesto así y sigue sin funcionar:

Código:

<strong>P</strong>
<table style="width:500px;overflow:hidden;">
<tbody>
<tr>
<td style="width:125px;word-wrap:break-word;"><strong>Becas</strong></td>
<td style="width:125px;word-wrap:break-word;"><strong>Organización</strong></td>
<td style="width:125px;word-wrap:break-word;"><strong>Fecha</strong></td>
<td style="width:125px;word-wrap:break-word;"><strong>Enlace</strong></td>
</tr>
<tr>
<td>Becas de Investigación</td>
<td>Banco de España</td>
<td>31-ene</td>
<td><a href="http://www.agpd.es/portalwebAGPD/revista_prensa/revista_prensa/2014/notas_prensa/
common/jun_14/140610_Convocatoria_Premios_PD_2014.pdf">http://www.agpd.es/portalwebAGPD/revista_prensa/revista_prensa/2014/notas_prensa/
common/jun_14/140610_Convocatoria_Premios_PD_2014.pdf</a></td>
</tr>
<tr>
<td>Convocatoria PERMANENTE para proyectos de investigación</td>
<td>Instituto Nacional de la Administración Pública</td>
<td>Todo el año</td>
<td><a href="http://www.mecd.gob.es/cultura-mecd/areas-cultura/museos/premios/
marques-lozoya/presentacion.html">http://www.mecd.gob.es/cultura-mecd/areas-cultura/museos/premios/
marques-lozoya/presentacion.html</a></td>
</tr>
</tbody>
</table>

[fede5426]

En <table style=""> veo el width y el overflow, pero no el "word-wrap:break-word;" probaste con eso?

EDITO: Perdon, esta mas abajo no lo habia visto, mi error. No sabria de que otra forma ayudarte, hasta ahi llega mi conocimiento lamentablemente, sigo siendo nuevito en esto jaja

[siddartha23]

La propiedad word-wrap:break-word la estas poniendo solo para el td de arriba, tienes que colocarlo donde van los enlaces, aunque los mas fácil es crear una regla entre etiquetas <style> en el <header> si no quieres crear una hoja de estilos externa,...



EDITO: Colócale esto a tus enlaces <a style="display:block; width:150px; word-wrap: break-word">

[ulises20100]

¡¡¡¡Por fin!!!!!

Lo único que me ha funcionado es poner el stilo directamente al <a> tal y como comentaba siddartha23

EDITO: Colócale esto a tus enlaces <a style="display:block; width:150px; word-wrap: break-word">

Lo único es que utilizo Wordpress y no se como poner estilos en la cabecera para que sólo afecten a una página y no a todo el site... se que lo mismo excede este foro, pero ya que estamos

Muchas gracias

[Sarlit]

Tu cabecera tendrá un id (y si no lo tiene incluso mejor, se lo pones tú) Para ver cual tiene solo tendrás que hacer clic derecho sobre ella en cualquier navegador y ver cual es la caja que te interesa. Con esa información te vas a Apariencia->Editor y buscas (Ctrl+F) en el style.css el id de tu cabecera y haces lo que quieras con él.

Si tuvieras que poner o modificar el id, en Apariencia->Editor deberías tener un archivo header.php, no creo que haga falta explicar que encontraras ahí, ¿no?

Un saludo.

[ulises20100]

Muchas gracias, pero si incluyo el style en el header afectará a todo el site porque todo el site usa el mismo header, y lo que quiero es que sólo afecte a los <a> de esa página ¿se puede hacer?

En cualquier caso, como tenía prisa de momento lo he arreglado a mano con un 'find & replace', pero no me importaría conocer la otra posibilidad.

[Sarlit]

Pues exactamente lo mismo pero con los <a> ponles una clase (<a class="miClase") en el html en cuestión y la editas en el css para dejarla como quieras (.miClase{...})