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

<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?

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.

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/

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.

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>