Zellenbreite an den Inhalt anpassen

Question

Angesichts der folgenden Markup, wie könnte ich CSS verwenden, um eine Zelle (alle Zellen in der Spalte) zu erzwingen, um die Breite des Inhalts in ihr statt Stretch (was das Standardverhalten ist) passen?

td.block {
  border: 1px solid black;
}

<table style="width: 100%;">
  <tr>
    <td class="block">this should stretch</td>
    <td class="block">this should stretch</td>
    <td class="block">this should be the content width</td>
  </tr>
</table>

Ich weiß, dass ich die Breite hart kodieren könnte, aber das würde ich lieber nicht tun, da der Inhalt, der in dieser Spalte erscheinen wird, dynamisch ist.

In der folgenden Abbildung ist das erste Bild das, was das Markup erzeugt. Das zweite Bild ist das, was ich will.

Answer 1

Die Einstellung der CSS-Breite auf 1 % oder 100 % eines Elements bezieht sich nach allen Angaben, die ich herausfinden konnte, auf das übergeordnete Element. Obwohl Blink Rendering Engine (Chrome) und Gecko (Firefox) im Moment des Schreibens scheint zu handhaben, dass 1% oder 100% (machen eine Spalten schrumpfen oder eine Spalte, um den verfügbaren Platz zu füllen) gut, es ist nicht garantiert nach allen CSS-Spezifikationen, die ich finden konnte, um es richtig zu machen.

Eine Möglichkeit besteht darin, die Tabelle durch CSS4-Flex-Divs zu ersetzen:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Das funktioniert in neuen Browsern, d.h. IE11+, siehe Tabelle am Ende des Artikels.

Answer 2

Einfach:

    <div style='overflow-x:scroll;overflow-y:scroll;width:100%;height:100%'>