将中间 table 单元格调整为内容的宽度

Question

目标是根据其中的内容调整中间 table 单元格的宽度。

我知道这可以在最后的 table 单元格上使用：width:1px;白色-space:nowrap;

但是，我无法在中间的 table 单元格上实现这一点。任何建议将不胜感激。

注意：我知道这在 flexbox 中有多简单，而不是寻找 flexbox 解决方案。

下图供参考。

Answer 1

您需要使用 table-cell 并为中心单元格使用 1px 宽度。左右单元格的宽度必须为自动：

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

如果需要填充，只需在左侧、右侧和中心 div 内使用内部 div。

将中间 table 单元格调整为内容的宽度

Adjust middle table cell to width of content

html

css

tablecell