如何根據內容使表格單元收縮？

第一個單元是根據內容
其他細胞符合表的其餘部分（超過兩個內容廣泛的共同收縮）

例子：

<table style="width: 500px;"> 
    <tr> 
     <td>foo</td> 
     <td>bar</td> 
    </tr> 
</table>

我需要的表看起來像這樣：

.___________________________________________________________________________. 
| foo | bar   <a lot of space here>        | 
|_____|_____________________________________________________________________| 
          500 px total width

注意：我不知道「foo」的寬度，所以我不能設置「50px」，「10％」或類似的東西。

來源

2012-07-10 Pavel S.

設置寬度爲10px ....例如， ' foo' – 2012-07-10 12:35:27

嗯，這是在我的文章的底部。我不知道單元格的寬度，所以我不能手動設置它。我需要瀏覽器縮小內容（在我的例子中是「foo」，但它可能是「foooooooooo」，這對於10px來說太長了）。 – 2012-07-10 12:36:36

即使設置了10px的寬度，單元格也會根據內容增長。在這裏可以看到小提琴：http://jsfiddle.net/7X4XT/2/ – 2012-07-10 12:45:04

您可以在第二單元的width設置爲100%

HTML：

<table> 
    <tr> 
     <td>foo</td> 
     <td class="grow">bar</td> 
    </tr> 
</table>

CSS：

table { width: 500px; } 
.grow { width: 100%; }

檢查this fiddle出來。

來源

2012-07-10 13:12:21 scumah

+15

這隻適用於桌子上的table-layout設置爲auto的情況。這是默認設置，但通常將'table-layout'設置爲'fixed'，這會導致100％的值按照字面順序進行（單元格將跨越整個表格，並且所有單元格將重疊）。 – Zenexer 2013-10-08 05:05:04

如果該表的總大小爲500像素且不能通過，則將td{max-width: 500px;};如果最小值是500像素，td {min-width: 500px;};看看這個exemple。

來源

2012-07-10 12:45:21

設置

td{ 
max-width:100%; 
white-space:nowrap; 
}

它將解決烏爾問題..

來源

2015-02-25 10:49:08

我知道這是幾年前問。 OP現在可能已經解決了它。但這對某人仍然有幫助。所以我發佈了對我有用的東西。這是我對我的做法。我將寬度設置爲接近零的任何東西，將其縮小，然後將白色空間設置爲nowrap。解決了。

td { 
width:0.1%; 
white-space: nowrap; 
}

來源

2017-04-25 15:34:24

謝謝。（+ 8個字符） – Andrew 2017-05-08 15:09:53

謝謝！有趣的是，'0'的寬度沒有任何影響，但是你的'0.1％'似乎是一個很好的解決方法。親自去了 – 2017-06-09 01:31:48

，我用width：1px去了。好主意Nat！ – SnailCoil 2017-07-21 17:51:31

如何根據內容使表格單元收縮？

回答

相關問題