CSS: Tableau imbriqué, fonctionne dans FF, échoue dans IE

J'aimerais vraiment cela pour travailler dans IE. Je ne suis pas capable de changer le fait que les tableaux ne devraient pas être utilisés ici. IE est le seul navigateur sur lequel le projet sur lequel je travaille est requis.CSS: Tableau imbriqué, fonctionne dans FF, échoue dans IE

Voici le code:

<html> 
<body> 

<style type="text/css"> 
#test table { 
    border-collapse: collapse; 
    table-layout: fixed; 
    width: 95%; 
} 

#test table td { 
    border: 1px solid rgb(0,0,0); 
} 

#test table div.scrollable { 
    max-width: 100%; 
    overflow: auto; 
} 

#test table table { 
    table-layout: auto; 
    width: 100%; 
} 
</style> 

<div id="test"> 
<table> 
<tr> 
<td colspan="2"> 

<div class="scrollable"> 

<table> 
<tr> 
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td> 
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td> 
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td> 
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</ td> 
</tr> 

</table> 

</div> 

</td> 
</tr> 
<tr><td>1</td><td>2</td></tr> 
<tr><td>1</td><td>2</td></tr> 
</table> 
</div> 
</body> 
</html>

Je me sers de l'éditeur Tryit pour jouer avec cela. Merci d'avance pour votre aide!

Source

2009-02-04 overslacked

Pouvez-vous préciser le comportement que vous attendez s'il vous plaît? –

Je ne sais pas exactement ce que vous essayez d'accomplir, mais essayez dans votre CSS:

#test table { 
    border-collapse: collapse; 
    table-layout: fixed; 
    width: 50%; 
} 

#test table td { 
    border: 1px solid rgb(0,0,0); 
} 

#test table div.scrollable { 
    max-width: 100%; 
    overflow: auto; 
} 

#test table table { 
    table-layout: auto; 
    width: 100%; 
} 

.scrollable { 
    height:40px; 
    width:100%; 
    overflow-x:scroll; 
    overflow-y:none; 

}

Source

2009-02-04 18:55:39

Ça a marché! J'ai remplacé ma table #test div.scrollable avec votre .scrollable et cela a fonctionné. Il semble que spécifier overflow-x et overflow-y plutôt que simplement déborder corrige le problème dans IE (et provoque un comportement attendu dans FF). Merci encore! – overslacked

CSS: Tableau imbriqué, fonctionne dans FF, échoue dans IE

Répondre

Questions connexes