将单元格宽度与内容相匹配 [英] Fit cell width to content

问题描述

给定以下标记，如何使用CSS强制一个单元格（列中的所有单元格）适合其内部的内容宽度，而不是拉伸（这是默认行为）？

Given the following markup, how could I use CSS to force one cell (all cells in column) to fit to the width of the content within it rather than stretch (which is the default behaviour)?

<style type="text/css">
td.block
{
border: 1px solid black;
}
</style>
<table style="width: 100%;">
<tr>
    <td class="block">this should stretch</td>
    <td class="block">this should stretch</td>
    <td class="block">this should be the content width</td>
</tr>
</table>

编辑：我意识到我可以硬编码宽度，但我不想这样做，该列中的内容是动态的。

I realize I could hard code the width, but I'd rather not do that, as the content which will go in that column is dynamic.

查看下面的图片，第一个图片是标记产生的。第二张图片是我想要的。

Looking at the image below, the first image is what the markup produces. The second image is what I want.

推荐答案

我不知道我是否明白你的问题，但我会采取刺。 示例的JSfiddle 。

I'm not sure if I understand your question, but I'll take a stab at it. JSfiddle of the example.

HTML：

<table style="width: 100%;">
<tr>
    <td class="block">this should stretch</td>
    <td class="block">this should stretch</td>
    <td class="block">this should be the content width</td>
</tr>
</table>

CSS：

td{
    border:1px solid #000;
}

tr td:last-child{
    width:1%;
    white-space:nowrap;
}

这篇关于将单元格宽度与内容相匹配的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！