假设我有一张桌子
<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.
更多推荐
发布评论