Limiter la largeur de la table

Question

J'ai une table html qui peut avoir une largeur maximale de 700px et je ne sais pas combien de colonnes il y aura (entre 3 et 10). Je veux que tous les éléments <th> aient un remplissage de 5px, mais cela augmente la largeur de la table et provoque le div dans lequel elle se trouve pour afficher les barres de défilement horizontales.

Puisque je ne connais pas le nombre de colonnes, il n'est pas possible de soustraire le px supplémentaire ajouté par le remplissage de la largeur totale. Mettre une valeur de débordement sur la div n'a aucun point, car il va juste obscurcir les colonnes au-delà de 700px

Existe-t-il un moyen de contourner ce problème, de définir une limite stricte sur la largeur de la table?

Answer 1

Utilisez le CSS ci-dessous et cela devrait empêcher votre table supérieure à la taille maximale que vous définissez:

table{ 
    table-layout:fixed; 
} 

Answer 2

Définissez la largeur de la table sur 100% et sa largeur div sur 700px.

Answer 3

La meilleure solution possible est celle que vous utilisez actuellement.

Étant donné que vous ne pouvez pas prédire le nombre de colonnes, vous ne pouvez pas définir une largeur pour chaque colonne. Par conséquent, définir le débordement du div parent sur auto et la largeur de la table enfant sur 100% est la meilleure solution.

Answer 4

Sur quoi réglez-vous le rembourrage?

Si vous définissez la largeur sur la table et le rembourrage sur le td vous devriez être en mesure d'obtenir exactement ce que vous voulez.