中間テーブルのセルをコンテンツの幅に合わせる

Question

中間のセルは、中身の内容に応じて幅を調整することを目標としています。

私は、これが末尾のテーブルセルで可能であることを知っています：幅：1px;ホワイトスペース：nowrap;

しかし、これは中間テーブルセルでは実現できません。どんな提案も大歓迎です。

注：これはフレックスボックスでどのくらい簡単かわかり、フレックスボックスソリューションを探していません。

下記参照用画像。

Answer 1

あなたは中央のセル用のテーブル・セルおよび使用1pxの幅を使用する必要があります。あなたはパディングが必要な場合は、ちょうど左、右と中央のdivの内側に、内側のdivを使用

.table{ display: table; width: 100%;} 
 
.left,.right,.center{display: table-cell; width: auto;} 
 
.left{ background-color: gray;} 
 
.right{ background-color: silver; text-align: right;} 
 
.center{ background-color: black; color: white; width: 1px;}

<div class="table"> 
 
    \t \t <div class="left">Content Left</div><div class="center">Content Center</div><div class="right">Content Right</div> 
 
</div>

：左と右のセルは、幅自動でなければなりません。