He intentado varias cosas (y miré por aquí) y nada funcionó hasta ahora. Así que voy a preguntar.

Lo que quiero:

Tengo el siguiente HTML simple:

<table>
  <tr>
    <td class="small">First column with text</td>
    <td class="extend">This column should fill the remaining space but should be truncated if the text is too long</td>
    <td class="small">Small column</td>
  </tr>
</table>

La tabla en sí debe tener un ancho del 100% del contenedor principal. Deseo la primera y la última columna (.small) para ser tan grandes como deben ser, por lo que el contenido puede encajar en él sin un salto de línea (más o menos lo quewhite-space: nowrap hace). La columna central (.extend) debe tomar el resto del espacio (para que la tabla permanezca dentro del 100% del ancho de su contenedor primario) y el texto dentro de.extend debe ser ellipsado antes de que tenga que romper en una línea de segundos.

He preparado un violín para esto enhttp://jsfiddle.net/3bumk/

Con estos colores de fondo esperaría un resultado como:

¿Hay alguna solución para esto?

Lo que consigo:

Mi problema es que si puedo hacer que el texto permanezca en una fila (sin saltos de línea), la tabla siempre desbordará el ancho del contenedor principal (y hará que sea desplazable), antes de tener la idea de omitir ellipsis del texto en el columna media

Lo que no es una solución (a menudo encontré):

No es una solución establecer la primera y la tercera columna en un "fijo" con (porcentaje o píxel), porque el contenido tendrá una longitud diferente de vez en cuando. Es posible añadir tantosdiv ospan según sea necesario (o deshacerse de la mesa todos juntos, lo que probé primero, condisplay ytable pero tampoco encontré una solución de trabajo de esa manera).

PD: Sería muy bueno si pudieras editar el violín a un ejemplo de trabajo, si conoces uno :-)

EDITAR ¡Soy libre de usar divs en lugar de una mesa también!