Celdas fijas a toda costa

urameshix · #1 (**permalink**) 27/08/2010, 09:23

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!

deirdre · #2 (**permalink**) 27/08/2010, 18:25

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

zerokilled · #3 (**permalink**) 27/08/2010, 19:24

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.

urameshix · #4 (**permalink**) 28/08/2010, 01:51

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!

zerokilled · #5 (**permalink**) 28/08/2010, 02:07

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.

urameshix · #6 (**permalink**) 28/08/2010, 04:04

Gracias zerokilled, me has ayudado mucho.

Un saludo!

kseso? · #7 (**permalink**) 28/08/2010, 11:52

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Kseso? Jugando con css</title>
 
<style type="text/css">
* {margin: 0; padding: 0; outline: 0; position: relative;}
body {padding: 20px; font-size: 1em; background: #D0D0D0;}
table {width:900px; border-collapse:collapse; margin: 0 auto; table-layout: fixed; background: #f5f5f5;}
caption {text-transform: uppercase; font-size: 1.3em; border-bottom: 1px solid #A0A0A0;}
tr {position: relative;}
td {width: 300px; overflow: hidden;}
.uno {text-align: left; vertical-align: middle;}
.dos {text-align: center; vertical-align: top; color: #444;}
.tres {text-align: right; vertical-align: bottom;}
img:hover {
  -moz-transform: scale(1.1);
  z-index:10;}
.tres:hover { vertical-align: top;}
td:hover.uno {overflow: auto;}
td:hover.dos {background: #D0D0D0; text-align: left; text-indent:3em; color: #5F5F5F; text-shadow: 1px 1px 0 #FFFFFF, -1px -1px 0 #CDCDCD;}
p:first-letter {text-transform: uppercase; font-size:1.5em;}
</style>
</head>
<body>
  <table summary="Ejemplo de una tabla con /table-layout/ declarado">
    <caption>Pruebas table-layout y efectos varios</caption>
    <tbody>
      <tr>
          <th>Imagen grande</th>
          <th>Texto</th>
          <th>Imagen pequeña</th>
      </tr>
      <tr>
          <td class="uno"><img src="http://www.playasycosta.com/images/tablas-de-surf.jpg" alt="1" /></td>
          <td class="dos">
              <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>
<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>
<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>
 
</td>
          <td class="tres"><img src="http://www.comparestoreprices.co.uk/images/fe/ferrari-michael-schumacher.jpg" alt="2" /></td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Purgue las propiedades innecesarias para su consulta.