Foros del Web » Creando para Internet » HTML »

Celdas fijas a toda costa

Estas en el tema de Celdas fijas a toda costa en el foro de HTML en Foros del Web. Hola a todos, Tengo un gran problema de espacio en mi aplicación con las tablas. Me gustaría saber si hay alguna manera directa de hacer ...
  #1 (permalink)  
Antiguo 27/08/2010, 10:23
 
Fecha de Ingreso: octubre-2005
Mensajes: 240
Antigüedad: 12 años, 2 meses
Puntos: 1
Celdas fijas a toda costa

Hola a todos,

Tengo un gran problema de espacio en mi aplicación con las tablas. Me gustaría saber si hay alguna manera directa de hacer que las celdas de mis tablas, no varien su ancho bajo ningún concepto.

Leí algo de table-layout , pero no se si funcionaría en mi caso.

Un saludo!
  #2 (permalink)  
Antiguo 27/08/2010, 19:25
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 8 años, 6 meses
Puntos: 44
Respuesta: Celdas fijas a toda costa

Hola urameshix

Dices que "no varien su ancho bajo ningún concepto". Podrías precisar lo que quieres decir con ese "bajo ningún concepto". Yo no te entiendo...

¿Qué ocurre si le das valores fijos a la tabla y a las celdas?

Mucho mejor sería ver tu código para poder ayudarte.

Saludos
  #3 (permalink)  
Antiguo 27/08/2010, 20:24
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.049
Antigüedad: 8 años, 7 meses
Puntos: 1484
Respuesta: Celdas fijas a toda costa

lo que quiere decir es que sin importar el contenido de las celdas no se redimensionen para ocupar el contenido. si se le da dimensiones fijas a la tabla y celda igual puede ocurrir la redimension cuando el contenido sobresale. entonces, el proposito de table-layout:fixed; es justamente para estos casos.
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #4 (permalink)  
Antiguo 28/08/2010, 02:51
 
Fecha de Ingreso: octubre-2005
Mensajes: 240
Antigüedad: 12 años, 2 meses
Puntos: 1
Respuesta: Celdas fijas a toda costa

Es lo que dice zerokilled,

Por motivos especiales, tengo que poner un ancho de celda a cada TD y no permitir que varie a causa del contenido.

Probaré con layout fixed, aunque como nunca lo he usado no se que hace exactamente. ¿Restringe el ancho de la celda a pesar del contenido? En ese caso, ¿Qué ocurre si el contenido tiene que sobresalir? Se corta?

Unsaludo!
  #5 (permalink)  
Antiguo 28/08/2010, 03:07
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.049
Antigüedad: 8 años, 7 meses
Puntos: 1484
Respuesta: Celdas fijas a toda costa

simplemente se desborda de la misma forma que cualquier otro elemento con dimensiones fijas. si no quieres que eso suceda tendrias que aplicarle a las celdas la propiedad overflow.
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #6 (permalink)  
Antiguo 28/08/2010, 05:04
 
Fecha de Ingreso: octubre-2005
Mensajes: 240
Antigüedad: 12 años, 2 meses
Puntos: 1
Respuesta: Celdas fijas a toda costa

Gracias zerokilled, me has ayudado mucho.

Un saludo!
  #7 (permalink)  
Antiguo 28/08/2010, 12:52
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Celdas fijas a toda costa

Info sobre table-layout
Como le han indicado, debe combinarlo con una anchura de la tabla y de las celdas para evitar un redibujado en función de contenido.

Tendrá desbordes en aquellos contenidos indivisibles (como imágenes), no así con otros como el texto, que forzará el retorno de carro. Como apuntó Zerokilled, evítelo con overflow o forzando un tamaño máximo a esos elementos (asignando un width menor a la anchura de la celda)

Una prueba olvidada, que ya no recuerdo su propósito ni intenciones. Tampoco las incongruencias con navegadores. Aparte de que sólo hay los "-moz"
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
  3. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  4. <title>Kseso? Jugando con css</title>
  5.  
  6. <style type="text/css">
  7. * {margin: 0; padding: 0; outline: 0; position: relative;}
  8. body {padding: 20px; font-size: 1em; background: #D0D0D0;}
  9. table {width:900px; border-collapse:collapse; margin: 0 auto; table-layout: fixed; background: #f5f5f5;}
  10. caption {text-transform: uppercase; font-size: 1.3em; border-bottom: 1px solid #A0A0A0;}
  11. tr {position: relative;}
  12. td {width: 300px; overflow: hidden;}
  13. .uno {text-align: left; vertical-align: middle;}
  14. .dos {text-align: center; vertical-align: top; color: #444;}
  15. .tres {text-align: right; vertical-align: bottom;}
  16. img:hover {
  17.   -moz-transform: scale(1.1);
  18.   z-index:10;}
  19. .tres:hover { vertical-align: top;}
  20. td:hover.uno {overflow: auto;}
  21. td:hover.dos {background: #D0D0D0; text-align: left; text-indent:3em; color: #5F5F5F; text-shadow: 1px 1px 0 #FFFFFF, -1px -1px 0 #CDCDCD;}
  22. p:first-letter {text-transform: uppercase; font-size:1.5em;}
  23. </head>
  24.   <table summary="Ejemplo de una tabla con /table-layout/ declarado">
  25.     <caption>Pruebas table-layout y efectos varios</caption>
  26.     <tbody>
  27.       <tr>
  28.           <th>Imagen grande</th>
  29.           <th>Texto</th>
  30.           <th>Imagen pequeña</th>
  31.       </tr>
  32.       <tr>
  33.           <td class="uno"><img src="http://www.playasycosta.com/images/tablas-de-surf.jpg" alt="1" /></td>
  34.           <td class="dos">
  35.               <p>Lorem ipsum dolor sit amet consectetuer leo nec vitae augue montes. Orci ante dapibus velit nunc Proin id purus faucibus elit eros. Eget In nascetur dictumst id felis congue consequat vitae tincidunt orci. Eget Morbi dui tortor Donec Sed nulla massa quis orci Nulla. Morbi fringilla montes.</p>
  36. <p>Id eget Vestibulum tellus eget laoreet nulla risus Nulla montes id. Nulla et Nunc dui orci sociis lorem interdum magna leo Pellentesque. Euismod Morbi nisl lacus gravida porta Nulla fermentum sed massa elit. Morbi penatibus enim ullamcorper ut dolor tincidunt Vestibulum Vivamus Nulla Vestibulum. Porttitor est.</p>
  37. <p>Sed congue Vivamus vel quis tincidunt penatibus odio cursus Integer Nulla. Semper suscipit Phasellus ipsum volutpat tincidunt tellus nonummy commodo massa eros. Ut lacinia enim condimentum velit at risus tempor id amet ac. Interdum tristique pellentesque sed sollicitudin sollicitudin In congue Maecenas tellus id. Neque Sed sit et id Nam leo sit habitasse In.</p>
  38.  
  39. </td>
  40.           <td class="tres"><img src="http://www.comparestoreprices.co.uk/images/fe/ferrari-michael-schumacher.jpg" alt="2" /></td>
  41.       </tr>
  42.     </tbody>
  43.   </table>
  44. </body>
  45. </html>

Purgue las propiedades innecesarias para su consulta.

Etiquetas: celdas, costa, fijas
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 22:39.