Html 表列宽等于内容宽度

假设我有一张桌子

<table class="table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Price</th>
            <th>Order Dat</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cakes</td>
            <td>100 $</td>
            <td>2015-01-09</td>
        </tr>
        <tr>
            <td>Clouthing for Sping</td>
            <td>20000 $</td>
            <td>2015-02-09</td>
        </tr>
    </tbody>
</table>

名称
价格
订单数据
蛋糕
100 $
2015-01-09
斯宾格语
20000 $
2015-02-09

我希望我的第二列（Prices）是其标题长度的精确大小，或者是其列中最长的内容长度。我不希望它，第二列，有浏览器添加到列中的“不可见空白”，使表格更宽

我已经尝试过的：

设置默认值%或px宽度。这不适合我，因为我不知道我的数据需要多长时间

将工作台宽度设置为不100%。这就是导致表拉伸并将这些“空白”添加到我的列中的原因。问题是我需要我的表是100%，我只希望我的一列不被拉伸

另外，我也在使用bootstrap。（不知道这是否有帮助）

编辑：

图片：

---

您需要将要输入的额外宽度设置为100%的列。这实际上不会使它成为一个真正的100%，它只会迫使它成为一个尽可能大的。这将使其他列自动换行以满足需要，因此请确保将“空白”属性设置为“不换行”

CSS

.table {
    width:100%;
    white-space: nowrap;
}
.nameCol {
    width:100%;
}
.table td {
    padding: 0 5px;
}

HTML

<table class="table">
    <thead>
        <tr>
            <th class="nameCol">Name</th>
            <th>Price</th>
            <th>Order Dat</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cakes</td>
            <td>100 $</td>
            <td>2015-01-09</td>
        </tr>
        <tr>
            <td>Clouthing for Sping</td>
            <td>20000 $</td>
            <td>2015-02-09</td>
        </tr>
    </tbody>
</table>

名称
价格
订单数据
蛋糕
100 $
2015-01-09
斯宾格语
20000 $
2015-02-09

用小提琴来观察它的动作：

---

另外，为了便于阅读，我还添加了一些左右填充，因为右边的列现在会更窄，而且你应该选择一个不同于

.table

的类，因为它很容易与

table

元素选择器混淆。

你能发布屏幕截图吗？我这样问是因为通常情况下，一张表只有在内容需要时才会变大；所以，如果您（或引导程序）不改变此默认行为，它应该始终完全适合其内容。@klaar补充道。正如你所看到的，价格栏有很多传统的空间。我想要全部内容。您想要成为主列的列，看起来像名称，需要将其宽度设置为100%，这将迫使所有列中的所有剩余宽度都集中到该列中。这几乎就是我想要的！。只是一个很小但很小的。假设Date列的日期将用空格书写：2015 02 09。您的方法将把列分成3行。有可能不这样做吗？没关系，我发现了一个叫做“空白：nowrap”的东西。这是一个非常讨厌的黑客，可能会带来不必要的副作用，因为这不是

width:100%的预期用途

，但如果它适合您的环境，那就好了。@Klar实际上这是一个非常常见的用法，尽管我现在和现在主要使用div。这个修复在早期IE时代非常兼容浏览器，我还没有看到因为它而导致的布局中断。@Stralos答案中提到了不换行，并在上面的代码示例中实现了它。