¿Cómo puedo establecer el ancho máximo de una celda de la tabla usando porcentajes?


100
<table>
<tr>
<td>Test</td>
<td>A long string blah blah blah</td>
</tr>
</table>

<style>
td{max-width:67%;}
</style>

Lo anterior no funciona. ¿Cómo puedo establecer el ancho máximo de una celda de la tabla usando porcentajes?


Amplíe "no funciona" .
Sparky

1
Debe asegurarse de que el PADRE de su td tenga un ancho específico (ya sea que pase ancho: 100%; desde el cuerpo hasta su td, o podría darle al padre (aquí: tr) 1000px o lo que prefiera . Cuando se usa %% en css, siempre usa el px exacto definido en el padre y luego transforma el px en %% para los hijos, ya que tienen un tamaño relativo a su padre.
Philipp Meissner

Para el registro, el ancho máximo ahora funciona en Safari y Chrome. No estoy seguro de cuánto tiempo ha sido compatible.
Jacob

Respuestas:


71

De acuerdo con la definición de ancho máximo en la especificación CSS 2.1, "el efecto de 'ancho mínimo' y 'ancho máximo' en tablas, tablas en línea, celdas de tabla, columnas de tabla y grupos de columnas no está definido". Por lo tanto, no puede establecer directamente el ancho máximo en un elemento td.

Si solo desea que la segunda columna ocupe como máximo el 67%, puede establecer el ancho (que en efecto es el ancho mínimo, para las celdas de la tabla) en 33%, por ejemplo, en el caso de ejemplo

td:first-child { width: 33% ;}

Configurar eso para ambas columnas no funcionará tan bien, ya que tiende a hacer que los navegadores le den a las columnas el mismo ancho.


En realidad, el ancho máximo funciona ahora en Safari y Chrome. No estoy seguro de cuánto tiempo ha sido compatible.
Jacob

114

Ya sé una pregunta anterior, pero ahora es posible usar la propiedad css table-layout: fixeden la etiqueta de la tabla. Responda a continuación de esta pregunta Ancho de porcentaje de CSS y desbordamiento de texto en una celda de tabla

Esto se hace fácilmente usando table-layout: fixed, pero un poco complicado porque no mucha gente conoce esta propiedad CSS.

table {
  width: 100%;
  table-layout: fixed;
}

Véalo en acción en el violín actualizado aquí: http://jsfiddle.net/Fm5bM/4/


2
¡Gracias! Temía que fijo significa que no volverá a calcular el ancho de las celdas que no tienen ningún ancho establecido, pero afortunadamente ese no es el caso.
fassl

4
En su jsfiddle, si elimino las propiedades de ancho, el ancho máximo aún no funciona, así que no estoy seguro de cómo esto resuelve el problema.
frezq

4
@superphonic creo que estás confundido. Si elimina el max-widthen ese jsfiddle, el ancho seguirá siendo el mismo, por lo que no es el max-widthque lo establece. Podría ser más claro si lo reemplaza con un max-width: 10%por primera vez td... verá que no cambia. jsfiddle.net/w3f8ey22/1
frezq

4
diseño de tabla: fijo no resuelve el problema de OP. No hace que mágicamente funcione el 'ancho mínimo' en una celda de la tabla. Ambos violines referenciados no tienen diferencia en la visualización si se elimina table-layout: fixed.
cmerriman

2
esta respuesta es engañosa ya que no está relacionada con la pregunta
Zoltán Süle

8

Sé que esto es literalmente un año después, pero pensé que lo compartiría. Estaba tratando de hacer lo mismo y encontré esta solución que funcionó para mí. Establecimos un ancho máximo para toda la tabla, luego trabajamos con los tamaños de celda para obtener el efecto deseado.

Coloque la tabla en su propio div, luego configure el ancho, el ancho mínimo y / o el ancho máximo del div como desee para toda la tabla. Luego, puede trabajar y establecer el ancho y el ancho mínimo para otras celdas, y el ancho máximo para el div trabajando efectivamente alrededor y hacia atrás para lograr el ancho máximo que queríamos.

<div id="tablediv">
<table width="100%">
 <tr>
  <td class="tdleft">Test</td>
  <td>A long string blah blah blah</td>
 </tr>
</table>
</div>

Luego en tus estilos pon:

#tablediv {
    width:90%;
    min-width:800px
    max-width:1500px;
}
.tdleft {
    width:20%;
    min-width:200px;
}

Es cierto que esto no le da un ancho "máximo" de una celda per se, pero permite cierto control que podría funcionar en lugar de dicha opción. No estoy seguro de si funcionará para sus necesidades. Sé que funcionó para nuestra situación en la que queremos que el lado de navegación en la página se amplíe y reduzca hasta un punto, pero para todas las pantallas anchas de estos días.


0

el porcentaje debe ser relativo a un tamaño absoluto, intente esto:

<table>
<tr>
<td>Testasdas 3123 1 dasd as da</td>
<td>A long string blah blah blah</td>
</tr>
</table>

<style>
table{width:200px;}
td{width:65%;border:1px solid black;}
</style>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.