Passen Sie die mittlere Tabellenzelle an die Breite des Inhalts an

Question

Das Ziel ist, dass die Zelle der mittleren Tabelle in der Breite abhängig von dem darin enthaltenen Inhalt angepasst wird.

Ich weiß, dass dies auf einer Tabellenzelle am Ende möglich ist mit: Breite: 1px; Leerzeichen: nowrap;

Allerdings kann ich dies nicht auf einer mittleren Zelle erreichen. Irgendwelche Vorschläge würden sehr geschätzt werden.

Hinweis: Ich weiß, wie einfach das ist in Flexbox, nicht auf der Suche nach Flexbox-Lösung.

Bild für Referenz unten.

Answer 1

Sie müssen verwenden table-cell und Verwendung 1px Breite für mittlere Zelle. linke und rechte Zelle muss Breite Auto sein:

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

Wenn Sie Polsterung benötigen, verwenden Sie einfach inneren div innen links, rechts und in der Mitte div.