2012-01-30 17 views
5

Kiedy próbuję poniższy kod, ukrywając przepełnienie nie działa (rozszerza):overflow: hidden nie działa wewnątrz tabeli

<table width="1024" border="0" align="center" cellpadding="0" cellspacing="0"> 
    <tr> 
    <td width="1024" height="100" colspan="3">&nbsp;</td> 
    </tr> 
    <tr><td width="1024"> 
    <div style="width:1024;height:436;overflow:hidden;"> 
    <div style="position:absolute;"> 
    <table border="0" cellpadding="0" cellspacing="0"><tr> 
    <td width="51"><img src="images/page1_04.jpg" width="51" height="436" /></td> 
    <td width="922" height="437"><img src="images/page1_05.jpg" width="922" height="436" /></td> 
    <td width="51"><img src="images/page1_06.jpg" width="51" height="436" onMouseOver="this.src='images/hover/page1_arrow_hover_06.jpg'" onMouseOut="this.src='images/page1_06.jpg'" /></td> 
    <td width="300"><img src="images/page2_05.jpg" /></td> 
    <td width="51"><img src="images/page2_04.jpg" width="51" height="436" onMouseOver="this.src='images/hover/page2_arrow_hover_04.jpg'" onMouseOut="this.src='images/page2_04.jpg'" /></td> 
    <td width="922" height="437"><img src="images/page2_05.jpg" width="922" height="436" /></td> 
    <td width="51"><img src="images/page2_06.jpg" width="51" height="436" /></td> 
    </tr></table> 
    </div> 
    </div> 
    </td> 
    </tr> 
</table> 

Jednak kiedy używać jedynie fragment kodu (div rodzic) działa dobrze.

Co robię źle?

Z góry dziękuję, Mark.

+0

Zrobiłeś wewnętrzna div być 'absolute', co oznacza, że ​​nie jest już związany z obiegiem dokumentów lub ustawieniach swojego rodzica div szerokość/wysokość. –

Odpowiedz

6

Musisz ustawić styl z table-layout:fixed; along with overflow:hidden; na elemencie stołu.

+1

Dzięki za szybki komentarz! Jeśli dobrze cię zrozumiałem, tabela powinna być:

ale nadal nie działa. Czy zrobiłem coś złego? – Mark

+1

Dziękuję wszystkim! Chodzi o dodanie "table-layout: fixed; overflow: hidden;" w stylu tabeli, co powoduje, że pozycja DIV jest relatywna i utrzymuje usunięcie macierzystego DIV. Jesteś najlepsza! – Mark

3

To powinno działać:

<td width="1024" height="100" style="display:block; overflow:hidden;"></td>