Üç nokta tablosundaki hücrelere <code>text-overflow: ellipsis</code> eklerken

Question

Garip bir sorun bulduk örten dom elemanı ile gösteriyor: ellipsisz-index yok sayar ve örten dom elemanı aracılığıyla o gösterir gibi

görünüyor Üstteki elemanı tablonun üstüne taşımak.

div{ 
    background: rgb(200, 100, 100); 
    position: fixed; 
    height: 100px; 
    width: 100%; 
    top: -50px; 
    left: 0; 
} 

div:hover{ 
    top: 0; 
} 

table{ 
    table-layout:fixed; 
    margin-top: 50px; 
    width: 100%; 
} 

table thead tr th{ 
    background: rgb(100, 200, 100); 
    width: 100px; 
} 

table tbody tr td{ 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    overflow: hidden; 
} 

Bu varsayılan görünüşüdür:

<div> 
    Could be a taskbar 
</div> 
<table> 
    <thead> 
    <tr> 
     <th>uno</th> 
     <th>dos</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
    <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</td> 
    <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</td> 
    </tr> 
    </tbody> 
</table> 

Bu Css olup:

("görev" top-50px olan)

Bu

dom yapıdır

Bu "sorun" görünümüdür: ("görev çubuğu") https://jsfiddle.net/gu1x1eka/

Bildirimi ellipsis noktalar: top

Canlı-testi) 0 olduğunu. Firefox 45.0.2 üzerinde test

• [! Başarısız]
• Krom 49.0.2623.112 m [eserleri!]

aynı sorunu var mı üzerinde test? Bu soruna neden olarak benim css bir hata mı?

Answer 1

div ürününün görev çubuğuna z-index: 1; ayarını yapmanız yeterlidir. http://www.456bereastreet.com/archive/201305/firefox_and_the_magical_text-overflowellipsis_z-index/