Anthony Russo Anthony Russo - 1 month ago 7
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


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.