表格列宽等于内容宽度

时间:2015-10-20 11:20:53

标签: html css

假设我有一张桌子

<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%,我只想我的一个列不被拉伸。

  3. P.S。我也在使用bootstrap。 (不知道是否有帮助)

    编辑:

    图片:

    http://imgur.com/a/oLsFU

1 个答案:

答案 0 :(得分:4)

您需要将要添加额外宽度的列设置为100%。这实际上不会让它成为真正的100%,它只会迫使它尽可能大。这将使其他列换行以满足需要,因此请确保将white space属性设置为no wrap。

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不同的类,因为它很容易与{{1}混淆元素选择器。