Comment définir la largeur de cellule pour 2 tables HTML avec différents comptages de colonnes?

Si j'ai 2 tables:Comment définir la largeur de cellule pour 2 tables HTML avec différents comptages de colonnes?

<table id="Table1"> 
    <tr> 
     <td></td><td></td><td></td> 
    </tr> 
</table> 

<table id="Table2"> 
    <tr> 
     <td></td><td></td><td></td><td></td> 
    </tr> 
</table>

La première a 3 colonnes, la seconde a 4 colonnes.

Comment puis-je définir un style pour représenter les deux tables lorsque je veux que la largeur de la cellule de Table1 soit 1/3 de la largeur de la table complète et que les cellules de Table2 soient 1/4 de la largeur de la table?

modifier: Pour clarifier après un commentaire dans l'une des réponses ci-dessous qui suggère de définir la largeur de la table à 100%, le texte dans certaines colonnes dépassera la largeur de division naturelle.

Source

2010-05-18 DaveDev

Les réponses à ce jour ont obtenu près, mais pas tout à fait raison:

#Table1, #Table2 { 
    width: 100%; 
    table-layout: fixed; 
}

et c'est tout.

table-layout: fixed doit être préférée pour toutes les tables où les largeurs de colonnes ne doivent pas dépendre du contenu des cellules. C'est plus rapide et beaucoup plus fiable que l'algorithme par défaut auto. Comme aucune des colonnes n'a une largeur explicite ici (soit à partir d'un élément <col>, soit à partir de la première ligne de <td> s, elles partagent toutes les 100% de largeur disponible de façon égale entre elles, quel qu'en soit le nombre. vous n'avez pas à calculer 25% s ou 33% s.

Source

2010-05-18 21:15:59 bobince

Essayez d'utiliser le CSS suivant:

.table1 td {width:33%} 
.table2 td {width:25%}

Source

2010-05-18 20:56:38

En utilisant certains CSS:

#Table1 td{ 
    width: 33%; 
} 
#Table2 td{ 
    width: 25%; 
}

Source

2010-05-18 20:56:49 jeanreis

Ce CSS devrait fonctionner

table td{ 
    width:100%; 
} 

table{ 
    table-layout:fixed; 
}

Source

2010-05-18 20:57:59 Kasturi

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 

    <style type="text/css"> 
     table 
     { 
      table-layout: fixed; 
      width: 100%; 
     } 
    </style>

Source

2010-05-18 21:02:54 uhleeka

Comment définir la largeur de cellule pour 2 tables HTML avec différents comptages de colonnes?

Répondre

Questions connexes