Lock celdas de la tabla a su tamaño predeterminado independientemente de su contenido

Question

Si tengo

<table> 
    <tr> 
     <td></td> 
     <td></td> 
    </tr> 
    <tr> 
     <td></td> 
     <td></td> 
    </tr> 
</table> 

y

table 
    { width: 100%; height: 100%; } 

Cada célula ocupa un igual trimestre de la mesa y la mesa se extiende a ajustarse a la ventana .

¿Cómo puedo evitar que estas celdas de la tabla se redimensionen a sí mismas para ajustarse al contenido dentro de las celdas (sin dejar de encajar en el contenedor de la tabla)?

Answer 1

Puede probar table-layout:fixed; - esto establece el diseño a un cierto tamaño fijo (especificado en CSS) e ignora el contenido de las celdas, por lo que el ancho de la celda nunca cambia. No estoy seguro de si esto afecta el diseño vertical o no.

More info on w3schools.

Answer 2

td{ width:50%; } funcionarán hasta que la mesa se ponga lo suficientemente pequeña.

Answer 3

Se podría tratar de escoger una sola célula de masticar todo el espacio y establecer que el 100% de altura y anchura:

<table> 
    <tr> 
     <td>Hi There.</td> 
     <td>x</td> 
    </tr> 
    <tr> 
     <td>Here is some text.</td> 
     <td class="space-hog"></td> 
    </tr> 
</table> 

y un poco de CSS:

table { 
    width: 100%; 
    height: 100%; 
} 
td { 
    white-space: nowrap; 
} 
td.space-hog { 
    width: 100%; 
    height: 100%; 
} 

Y un live example. Debe tener cuidado para evitar el ajuste de línea desagradable cuando .space-hog hace su trabajo, de ahí el white-space: nowrap. Si coloca el .space-hog en la última fila, puede evitar presionar las partes interesantes hacia abajo.

Answer 4

¿Algo parecido a usar overflow:hidden; quizás?

Answer 5

Puede hacerlo usando position: absolute en el contenido de cada celda de tabla: porque si lo hace, entonces el tamaño del contenido no afecta el tamaño de la celda.

Para hacer esto, también debe posicionar las celdas de la tabla (para que el posicionamiento absoluto del contenido sea relativo a la celda de la tabla) - and/or, to support Firefox, position an extra div within the table cells ya que Firefox no le permite aplicar posición a las celdas.

Por ejemplo, estoy usando este código HTML:

<td><div class="bigimg"><img src="...."/></div></td> 

Junto con el siguiente CSS, por lo que el tamaño de la imagen no afecta al tamaño de la celda que lo contiene:

div.bigimg 
{ 
    height: 100%; 
    width: 100%; 
    position: relative; 
} 
div.bigimg > img 
{ 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

que establezca la height y width de div.bigimg-100% para que coincida con el tamaño de la td que lo contiene, porque estoy usando JavaScript para cambiar el tamaño de las imágenes en tiempo de ejecución para adaptarse a sus envases, los cuales son el div.bigimg.

Answer 6

He logrado hacer esto sin un diseño de tabla fijo. css de la célula:

.dataCell { 
    display: table-cell; 
    padding: 2px 15px 2px 15px; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    overflow: hidden; 
    width: auto; 
    max-width: 1px; 
} 

Answer 7

Añadir table-layout:fixed; al estilo de la tabla.

Si observa que esto ayuda a corregir el ancho pero no la altura, esto se debe a que aún podría existir algún tipo de relleno dentro de cada celda de td. Agregue padding:0px; al estilo del td.

Answer 8

También puede bloquear las células a un porcentaje, con el fin de mantener la capacidad de respuesta, por ejemplo:

td:first-child, th:first-child { 
    width: 20%; 
    } 
    // assuming you have 8 remaining columns (20 + 10*8 = 100%) 
    td:not(:first-child), th:not(:first-child) { 
    width: 10%; 
    }