Anthony Russo Anthony Russo - 1 year ago 44
HTML Question

Adjust middle table cell to width of content

The goal is for the middle table cell to adjust in width depending on the content inside of it.

I know this is possible on a table cell at the end using: width:1px; white-space:nowrap;

However, I am not able to achieve this on a middle table cell. Any suggestions would be greatly appreciated.

Note: I know how easy this is in flexbox, not looking for flexbox solution.

Image for reference below.

enter image description here

Answer Source

You need to use table-cell and use 1px width for center cell. left and right cell must be width auto:

.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">
 		<div class="left">Content Left</div><div class="center">Content Center</div><div class="right">Content Right</div>

If you need padding, just use inner div inside left, right and center div.