Ich habe jetzt einige Dinge ausprobiert (und mich hier umgesehen) und bisher hat nichts funktioniert. Also werde ich fragen.

Was ich möchte:

Ich habe folgendes einfaches HTML:

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

Die Tabelle selbst sollte 100% der Breite des übergeordneten Containers haben. Ich wünsche die erste und letzte Spalte (.small) so groß sein, wie sie sein müssen, damit der Inhalt ohne Zeilenumbruch hineinpasst (so ziemlich waswhite-space: nowrap tut). Die mittlere Spalte (.extend) sollte den Rest des Platzes einnehmen (damit die Tabelle innerhalb von 100% der Breite ihres übergeordneten Containers bleibt) und den Text darin.extend sollte ellipsenförmig sein, bevor eine Sekundenzeile unterbrochen werden muss.

Ich habe eine Geige dafür vorbereitethttp://jsfiddle.net/3bumk/

Mit diesen Hintergrundfarben würde ich folgendes Ergebnis erwarten:

Gibt es dafür eine Lösung?

Was ich bekomme:

Mein Problem ist, wenn ich dafür sorgen kann, dass der Text in einer Zeile bleibt (ohne Zeilenumbrüche), dass die Tabelle immer über die Breite des übergeordneten Containers hinausläuft (und einen Bildlauf ausführt), bevor ich den Text in das Auslassungszeichen setzen möchte mittlere Spalte.

Was ist keine Lösung (habe ich oft gefunden):

Es ist keine Lösung, die erste und dritte Spalte auf einen festen Wert (Prozentsatz oder Pixel) festzulegen, da der Inhalt von Zeit zu Zeit unterschiedlich lang ist. Es können beliebig viele hinzugefügt werdendiv oderspan nach Bedarf (oder den Tisch alle zusammen loswerden - was ich zuerst versucht habe, mitdisplay undtable Aber auch so habe ich keine funktionierende Lösung gefunden.

PS: Es wäre sehr schön, wenn Sie die Geige zu einem funktionierenden Beispiel bearbeiten könnten, wenn Sie eines kennen :-)

BEARBEITEN Es steht mir frei, divs anstelle eines Tisches zu verwenden!