表列宽度等于内容宽度

Question

假设我有一张桌子

<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>

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

我已经尝试过的：

1. 设置默认％或px宽度。这不适合我，因为我不知道我的数据会持续多久。

2. 将表格宽度设置为不等于100％。这就是原因，导致表拉伸并将那些“空白”添加到我的列中。问题是我需要我的表是100％，我只希望其中一列不被拉伸。

附言：我也在使用引导程序。（不知道是否有帮助）

编辑：

图片：

http://imgur.com/a/oLsFU

Answer 1

您将需要设置要添加额外宽度的列，使其具有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>

摆弄小提琴以查看其作用：https : //jsfiddle.net/q16dp8ja/1/

附加说明，出于可读性的考虑，我还添加了一些左右填充，因为现在列的右侧会变窄，而且您应该选择其他类，而不是.table容易与table元素选择器混淆的类。