CSS：設置表格的最大寬度

我在html中生成應用程序日誌，並且偶然發現了一個令人討厭的問題。我有以下佈局：CSS：設置表格的最大寬度

| Action | Result | File path   |

例如

| Copy | Success | C:\VeryVeryVeryLongF | 
|  |   | ileName.txt   |

列1和2只顯示短標籤：它們的內容應保持在一個單一的線路。另一方面，第3列可能包含非常長的文件路徑，如果它們不能放在一行上，則應該跨越多行。

爲了達到這個目的，我在第一列使用了white-space: nowrap;，最後使用了white-space: normal; word-break: break-all;。此外，表格有width:100%。

這在Chrome和IE中很好用，但不適用於Firefox：總之，我似乎無法找到一種方法來告訴Firefox 8.0不放大表格的最後一列，而是讓文本跨度多行。在我前面的例子中，Firefox的打印

| Copy | Success | C:\VeryVeryVeryLongFileName.txt |

文本中的前兩列可能會有所不同，所以我不能手動設置其寬度和使用table-layout: fixed。我也嘗試在桌上設置max-width，並將其包裝在div中，但無濟於事。

請參閱http://jsfiddle.net/GQsFx/6/瞭解真實生活中的示例=）如何讓Firefox像Chrome一樣運行？

來源

2011-12-13 Clément

另外'自動換行：打破-word'不起作用。 –

相關：http://stackoverflow.com/questions/1258416/word-wrap-in-a-html-table，http://stackoverflow.com/questions/138132/using-css-how-can-i-split -a-string-ega-long-url-in-a-table-cell –

好吧，現在我們已經升級到了FireFox22，看起來你的jsfiddle顯示正常。 – Gerrat

使用這個CSS

.actions { 
width:100%; 
} 
.actions tr td:nth-child(3) { 
width:200px; 
word-wrap:break-word; 
    display:inline-block; 
}

來源

2011-12-14 16:14:02 pravin

您對第三列使用的是固定大小，並不符合我的需要：我需要第三列儘可能寬。 –

-1

最大寬度是有效的CSS2，但只有在NS7，歌劇7和Mozilla的可能的支持。我不相信IE 6支持它。

來源

2012-02-07 13:27:12

這不是OP要求的。 –

-1

嘗試把width: auto;。這將告訴瀏覽器使用所需的空間...

來源

2012-02-09 02:24:41

這不會改變任何東西：/ –

哦，廢話！我不知道爲什麼，對不起！ –

-1

這應該工作：

.actions tr td:nth-child(3) { 
     white-space: normal; 
     word-break: break-all; 
     max-width:200px; 
    }

來源

2012-03-01 05:36:07

我不想爲第三列指定最大寬度，因爲網頁可能在多種監視器上進行查看... –

-1

下面的CSS似乎得到它爲我工作。請注意添加了表格佈局：固定，以及使用單詞換行：分詞。

.actions { 
    width:100%; 
    table-layout:fixed; 
} 

.actions tr td { 
    white-space: nowrap; 
} 

.actions tr td:nth-child(3) { 
    white-space:normal; 
    word-wrap: break-word; 
}

來源

2012-03-01 15:49:37

這不是最優的：所有的柱子最終佔據相同的空間，而兩個第一列可以在不破壞內容的情況下縮小尺寸，爲最後一個提供更多空間。 –

這項工作？這似乎與jsfiddle一起工作。基於百分比的前兩列，然後寬度自動第三，使用表格佈局：固定在表格上。

http://jsfiddle.net/keithwyland/uuF9k/1/

.actions { 
    width:100%; 
    table-layout: fixed; 
} 

.actions tr td { 
    white-space: nowrap; 
    width: 15%; 
} 

.actions tr td:nth-child(3) { 
    white-space: normal; 
    word-break: break-all; 
    word-wrap: break-word; 
    width: auto; 
}

來源

2012-03-05 21:22:55 keithwyland

對，但我不想設置列的寬度......百分比不適合窗口縮放（半個800px屏幕的15％實際上並不多）。我需要的是根據內容計算出的尺寸... –

我發現避免表格過大的唯一方法是使用'table {table-layout：fixed;}'或者用td限制例如'td {max-width：100px;文本溢出：省略號;溢出：隱藏;}' – ubershmekel

CSS：設置表格的最大寬度

回答

相關問題