表格列宽等于内容宽度(Table column width equal to content width)

表格列宽等于内容宽度(Table column width equal to content width)

假设我有一张桌子

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

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

我已经尝试过：

设置默认％或px宽度。 这不适合我，因为我不知道我的数据有多长。

设置表格宽度不是100％。 这就是导致表拉伸并将这些“空格”添加到我的列的原因。 问题是我需要我的表是100％，我只是想让我的一个列不被拉伸。

Ps我也在使用bootstrap。 （不知道是否有帮助）

编辑：

图片：

http://imgur.com/a/oLsFU

Let's say I have a table

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

I want my second column (Prices) to be the exact size of its header length or the longest content length in its column. I don't want it, the second column, to have that 'invisible white space' that the browser adds to the column, to make the table wider.

What I have already tried:

Setting Default % or px width. This is not suitable for me, since I don't know how long will my data be.

Setting table width not to 100%. This is the reason, that causes the table to stretch and add those 'white spaces' to my columns. The problem is that I need my table to be 100%, I just want one of my columns NOT to be stretched.

P.s. I'm also using bootstrap. (don't know if that helps)

EDIT:

Pictures:

http://imgur.com/a/oLsFU

最满意答案

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

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元素选择器混淆。

You will want to set the column that you want the extra width to go into to have its with of 100%. This won't actually make it a true 100%, it will just force it to be a big as possible. This will make other columns wrap though to fit that need so make sure you set the white space property to no wrap.

The CSS

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

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

Fiddle to see it in action: https://jsfiddle.net/q16dp8ja/1/

Additional notes, I also added some left right padding for readabilities sake since the columns will now be narrower on the right, also you should pick a different class than .table as it can be easily confused with table the element selector.