将容器宽度扩展到适合内容之外

Question

这是我的表格单元格。它与它包含的内容一样宽：

<td class="sticky calltd employeetd" style="width: fit-content;">
    Wintheiser Granville
</td>

有没有办法将容器内部的宽度设置为比“fit-content”长 10 像素，例如：

width: calc(fit-content + 10px); <---- doesn't work

我没有找到相同的问题，但如果有，请在此处链接。

---

宽度：适合内容；

我需要什么：

蓝色区域必须是没有边距或填充的内容空间

Answer 1

它不会赢得任何选美比赛，但这里有一个解决方案，至少可以让你到达我理解你想去的地方：

<td class="sticky calltd employeetd" style="width: fit-content;">
    Sheldon Cooper
    <div style="width: 10px; height: 0px; display: inline-block;"></div>
</td>

这样，您只需在 div 的内容旁边添加一个高度为零（意味着它是不可见的）和首选宽度的 td 容器。

如果您的 fit-content 属性是根据 td 内容的长度计算的，这将扩展 10px 的宽度。如果您的 fit-content 是根据其他东西计算出来的，这对您没有帮助。

Answer 2

一项小型研究使我here

戈登的回答提到了以下几点：

<块引用>

CSS 不是“编程语言”。您无法真正做出决策、收集数据或操作该语言并非旨在执行的任何操作。如果你想这样做，javascript 是你最好的选择

为此我也建议使用 JS，但我相信您已经想到了。

此外，请注意以下事项：

<块引用>

如果您对 jQuery 感到满意，则可以使用 $("#postanad").width()。