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

Question

<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 tabla usando porcentajes?

Answer 1

Según la definition of max-width en la especificación CSS 2.1, “El efecto de 'min-width' y 'max-width' 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) al 33%, p. en el caso del ejemplo

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

Ajuste de que para ambas columnas no funcionará tan bien, ya que tiende a hacer que los navegadores dan las columnas de igual ancho.

Answer 2

el porcentaje debe ser relativa a un tamaño absoluto, Prueba 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> 

Answer 3

Sé que esto es literalmente un año después, pero pensé que lo compartiría. Intentaba 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 el efecto deseado.

Coloque la tabla en su propio div, luego establezca el ancho, ancho mínimo y/o 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 que div funcione de manera efectiva 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 sus estilos puso:

#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 célula en sí, pero sí permite un cierto control que podría funcionar en Lugar de tal opción. No estoy seguro 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 baje hasta cierto punto, pero para todas las pantallas anchas en estos días.

Answer 4

Una vieja pregunta que sé, pero ahora es posible usando la propiedad css table-layout: fixed en la etiqueta de la tabla. Responda debajo de esta pregunta CSS percentage width and text-overflow in a table cell

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

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

verlo en acción en el violín actualizada aquí: http://jsfiddle.net/Fm5bM/4/