Le tableau ne débordera pas

Question

J'ai une table avec un nombre variable de colonnes que je veux placer dans un div de largeur fixe.

Je souhaite que les colonnes de la table aient une largeur fixe et que la table déborde horizontalement à l'intérieur de la div si elle est trop large.

Cependant, la table semble se redimensionner pour s'adapter à l'intérieur de la div.

<style> 
table,td{ 
    border:1px solid black; 
} 
</style> 
<div style="overflow:auto;width:500px;border: 1px solid red"> 

<table> 
<tr> 
    <td style="width:100px">a</td> 
    <td style="width:100px">a</td> 
    <td style="width:100px">a</td> 
    <td style="width:100px">a</td> 
    <td style="width:100px">a</td> 
    <td style="width:100px">a</td> 
    <td style="width:100px">a</td> 
</tr> 
</table> 

</div> 

Je peux contourner ce problème en réglant la table sur une largeur supérieure à la div. Mais la table a un nombre variable de colonnes donc je préfère ne pas le faire.

Y a-t-il un meilleur moyen?

Merci pour vos suggestions.

Answer 1

Vous allez avoir défini une largeur explicite sur la table (utilisez CSS pour cela bien sûr). Vraisemblablement, si les colonnes sont générées dynamiquement, il ne serait pas trop difficile non plus de calculer la largeur de façon dynamique. Vous devrez utiliser CSS en ligne, mais bon, c'est un bon cas pour cela.

Answer 2

Vous pouvez utiliser

<table> 
<tr> 
    <td style="min-width:100px;max-width:100px">a</td> 
    <td style="min-width:100px;max-width:100px">a</td> 
    <td style="min-width:100px;max-width:100px">a</td> 
    <td style="min-width:100px;max-width:100px">a</td> 
    <td style="min-width:100px;max-width:100px">a</td> 
    <td style="min-width:100px;max-width:100px">a</td> 
    <td style="min-width:100px;max-width:100px">a</td> 
</tr> 
</table> 

Mais je pourrais avoir des problèmes pour IE 8. <