¿Cómo puedo hacer que mi tabla HTML sea 100% amplia y TODAS sus celdas solo tienen el ancho de sus contenidos?

Tengo esta grilla:

enter image description here

Si cambio el ancho de las tablas de 100% a automático, la tabla colapsa horizontalmente.

enter image description here

Lo cual no es deseable ¿Cómo puedo hacer que las columnas de la tabla (elementos td) se contraigan automáticamente para ajustarse a su contenido, mientras que, al mismo tiempo, la tabla y los elementos tr ocupan todo el espacio de su elemento primario?

¿Cómo puedo hacer que las columnas de la tabla (elementos td) se contraigan automáticamente para ajustarse a su contenido, mientras que, al mismo tiempo, la tabla y los elementos tr ocupan todo el espacio de su elemento primario?

y

son tan anchos como los elementos

dentro de ellos. No puede hacer que cada

sea ​​tan pequeño como su contenido y que la tabla en su totalidad sea tan amplia como el espacio disponible, ya que la tabla solo puede ser tan ancha como las celdas dentro de ella.

(es decir, a diferencia de la mayoría de los elementos HTML, los elementos > no se pueden clasificar independientemente de sus contenidos).

Sin embargo, puedes configurar una celda para que sea lo más amplia posible, dándole un ancho del 100% :

 
Content Content Content

Ver http://jsfiddle.net/9bp9g/

El ancho de

se definirá por el ancho de

en la primera

.

De lo contrario, puede usar CSS para definir reglas para

width como:

 .myform tr td{padding:0px;margin:0px;} .myform td{width:200px;}