Q

歌劇<table>包的bug

2011-03-15 32 views 0 likes

0

我有以下HTML/CSS：歌劇<table>包的bug

<html> 
<body> 
<style type='text/css'> 
.result_table table { 
    border-collapse:collapse; 
} 
.result_table table td { 
    white-space:nowrap; 
    max-width:200px; 
    overflow:hidden; 
    padding:4px; 
    max-height:24px; 
    height:24px; 
} 
</style> 
<div class="result_table"> 
<table border=1><thead><tr><td>Title</td></tr></thead> 
    <tbody> 
    <tr> 
    <td>Lorem ipsum dolor sit amet, ...</td> 
    </tr> 
    </tbody> 
</table> 
</div> 
</body> 
</html>

當「排版impsum」有大長（超過9000點的符號），Opera瀏覽器開始換行，即使沒有休息符號TD有nowrap和overflow指令。

enter image description here

等知名瀏覽器做一切有益的：

enter image description here

2011-03-15 heximal

+2

你忘了提及Opera的哪個版本。 – SpliFF 2011-03-15 09:51:50

+1

http://jsfiddle.net/Kyle_Sevenoaks/ATEDV/在Opera中看起來不錯11.01 – Kyle 2011-03-15 09:59:12

+0

在WinXP上使用Opera 10.51。 – stealthyninja 2011-03-15 10:14:32

A

回答

2

可能overflow-y:hidden不會在歌劇display:table-cell工作。 O可能的解決方案是爲.result_table table td添加display:block。

演示：http://jsfiddle.net/qXjV8/

另一種解決辦法是用一個div來包裝td內的文本，改變選擇器.result_table table td div

演示：http://jsfiddle.net/qXjV8/1/

在這兩種情況下，我建議你使用像這樣的重置css：http://meyerweb.com/eric/tools/css/reset/

另外你會注意到，在這兩種情況下，Opera中的第二行都是部分可見的。要解決這個問題，你可以使用line-height屬性。

2011-03-15 11:25:17 Sotiris

+0

顯示：塊 - 好主意！謝謝！ – heximal 2011-03-15 11:54:12

+0

@heximal歡迎:) – Sotiris 2011-03-15 11:58:12

+0

順便說一句，我已經找到了「netsted div」解決方案，但不想因爲大量的基因數據而使用它。它會增加內容的長度 – heximal 2011-03-15 11:59:20

相關問題