セルの幅をコンテンツに合わせる

次のマークアップを考えると、CSSを使用して、1つのセル（列内のすべてのセル）を、ストレッチ（デフォルトの動作）ではなく、その中のコンテンツの幅に合わせることができますか？

<style type="text/css">
td.block
{
border: 1px solid black;
}
</style>
<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>

編集：私は幅をハードコーディングできることを知っていますが、その列に入るコンテンツは動的であるため、私はむしろそれをしたくありません。

下の画像を見ると、最初の画像はマークアップが生成するものです。2番目の画像は私が欲しいものです。

あなたの質問を理解しているかどうかはわかりませんが、私はそれに挑戦します。例のJSfiddle。

HTML：

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

CSS：

td{
    border:1px solid #000;
}

tr td:last-child{
    width:1%;
    white-space:nowrap;
}

設定

max-width:100%;
white-space:nowrap;

あなたの問題を解決します。

私にとって、これはテーブルとその列に最適な自動調整と自動サイズ変更です（cssを使用してください！important ...が必要な場合のみ）

.myclass table {
    table-layout: auto !important;
}

.myclass th, .myclass td, .myclass thead th, .myclass tbody td, .myclass tfoot td, .myclass tfoot th {
    width: auto !important;
}

テーブルまたはテーブルの列にCSS幅を指定しないでください。テーブルのコンテンツが大きい場合は、画面サイズを超えます。

CSSの幅を要素の1％または100％に設定することは、私が見つけたすべての仕様に従って、親に関連しています。執筆時点のBlink Rendering Engine（Chrome）とGecko（Firefox）は、1％または100％（列を縮小するか、列を使用可能なスペースを埋める）を適切に処理するようですが、すべてのCSS仕様に従って保証されていません適切にレンダリングできることがわかりました。

1つのオプションは、テーブルをCSS4フレックスdivに置き換えることです。

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

これは新しいブラウザ、つまりIE11 +で機能します。記事の下部にある表を参照してください。

これを行うには多くの方法があります！

私が間違っている場合は私を修正しますが、問題はこの種の結果を探しています。

<table style="white-space:nowrap;width:100%;">
<tr>
<td class="block" style="width:50%">this should stretch</td>
<td class="block" style="width:50%">this should stretch</td>
<td class="block" style="width:auto">this should be the content width</td>
</tr>
</table>

最初の2つのフィールドは残りのページを「共有」します（注：50％のフィールドにテキストを追加すると、より多くのスペースが必要になります）、最後のフィールドは常にテーブルを支配します。

テキストを折り返してよければ、white-space：nowrap;を移動できます。3番目のフィールドのスタイルに
合わせて、そのフィールドで新しい行を開始する唯一の方法になります。

または、最後のフィールドに長さを設定できます。幅：150ピクセル、最初の2つのフィールドにはパーセンテージを残します。

お役に立てれば！

シンプル：

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