Tema: Celdas fijas a toda costa
Ver Mensaje Individual
  #7 (permalink)  
Antiguo 28/08/2010, 11:52
kseso?
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
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. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  5. <title>Kseso? Jugando con css</title>
  6.  
  7. <style type="text/css">
  8. * {margin: 0; padding: 0; outline: 0; position: relative;}
  9. body {padding: 20px; font-size: 1em; background: #D0D0D0;}
  10. table {width:900px; border-collapse:collapse; margin: 0 auto; table-layout: fixed; background: #f5f5f5;}
  11. caption {text-transform: uppercase; font-size: 1.3em; border-bottom: 1px solid #A0A0A0;}
  12. tr {position: relative;}
  13. td {width: 300px; overflow: hidden;}
  14. .uno {text-align: left; vertical-align: middle;}
  15. .dos {text-align: center; vertical-align: top; color: #444;}
  16. .tres {text-align: right; vertical-align: bottom;}
  17. img:hover {
  18.   -moz-transform: scale(1.1);
  19.   z-index:10;}
  20. .tres:hover { vertical-align: top;}
  21. td:hover.uno {overflow: auto;}
  22. td:hover.dos {background: #D0D0D0; text-align: left; text-indent:3em; color: #5F5F5F; text-shadow: 1px 1px 0 #FFFFFF, -1px -1px 0 #CDCDCD;}
  23. p:first-letter {text-transform: uppercase; font-size:1.5em;}
  24. </style>
  25. </head>
  26. <body>
  27.   <table summary="Ejemplo de una tabla con /table-layout/ declarado">
  28.     <caption>Pruebas table-layout y efectos varios</caption>
  29.     <tbody>
  30.       <tr>
  31.           <th>Imagen grande</th>
  32.           <th>Texto</th>
  33.           <th>Imagen pequeña</th>
  34.       </tr>
  35.       <tr>
  36.           <td class="uno"><img src="http://www.playasycosta.com/images/tablas-de-surf.jpg" alt="1" /></td>
  37.           <td class="dos">
  38.               <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>
  39. <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>
  40. <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>
  41.  
  42. </td>
  43.           <td class="tres"><img src="http://www.comparestoreprices.co.uk/images/fe/ferrari-michael-schumacher.jpg" alt="2" /></td>
  44.       </tr>
  45.     </tbody>
  46.   </table>
  47. </body>
  48. </html>

Purgue las propiedades innecesarias para su consulta.