100％寬度的表溢出div容器

我有一個溢出它的父容器的html表的問題。我已經設置a sample jsfiddle here來說明問題。100％寬度的表溢出div容器

如何強制標題文本和表格單元格文本以適合它的容器的方式進行包裝？我更喜歡CSS方法，但如果絕對必要的話，也可以使用Javascript（或jQuery）。

2011-07-06 Victor

142

從純粹的「使其適合在div」的角度來看，以下內容添加到您的表類（jsfiddle）：

table-layout:fixed; 
width: 100%;

_{見fixed與automatic表格佈局。}

來源

2011-07-06 18:31:55 canon

+30

問題是，此方法使所有列的寬度相同，不完全理想 –

@SerjSagan它只會使列寬相同，因爲我們沒有明確設置任何列的寬度。在沒有列寬的情況下，固定寬度算法將剩餘的表格寬度均勻地分佈在未分欄中。在這種情況下，它的表格寬度是5列的100％。這就是'table-layout：fixed'的意義所在......佈局是可預測的，不會適應內容。您可以指定列寬或者算法爲您決定。 – canon

@canon我剛剛意識到，這是不工作時，至少在Chrome中調整最小寬度的單元格。請參閱http://jsfiddle.net/dtttLqgw/1/。 – needfulthing

添加display: block;和overflow: auto;到.my-table。這將簡單地切斷超過您執行的280px限制的任何內容。由於像pélagosthrough這樣的詞比280px更寬，所以沒有辦法讓它「看起來很漂亮」。

來源

2011-07-06 18:28:46

好吧，考慮到你的限制，我認爲設置overflow: scroll;的.page div可能是你唯一的選擇。 280像素是相當狹窄的，並且給定您的字體大小，單獨換行不會執行此操作。有些詞很長，不能被包裝。您可以大幅縮小字體大小，也可以使用溢出：滾動。

來源

2011-07-06 18:32:28

嘗試增加

word-break: break-all

你的表元素的CSS。

這將獲取表格單元格中的單詞以使表格中的單詞不會比其包含的div更寬，但表格列的大小仍爲動態。 jsfiddle demo。

來源

2013-10-09 20:34:54

甚至更好''換句話說：斷字;' – Apolo

@Apolo - 同意！我在原來的jsfiddle演示中也使用了它（請參閱上面答案正文中的鏈接）。 –

眨眼瀏覽器具有'word-break：break-word'，效果最好。 – Volvox

嘗試增加以td：

display: -webkit-box; // to make td as block 
word-break: break-word; // to make content justify

溢出TDS將與新行對齊。

來源

2017-12-21 06:29:11 usernaveen

100％寬度的表溢出div容器

回答

相關問題