Existe-t-il un moyen de synchroniser les largeurs de colonnes dans une table html?

Question

Si j'ai ces deux tables:

<table> 
    <tr> 
     <td>Small Length Content</td> 
    </tr> 
</table> 

<table> 
    <tr> 
     <td>Dynamic Content Goes Here And It's Longer Than The TD Above</td> 
    </tr> 
</table> 

Comment puis-je faire en sorte que les deux colonnes ont la même largeur?

Je ne peux pas combiner les tables, donc ce n'est pas une option. Je ne peux pas non plus utiliser des largeurs fixes depuis son contenu dynamique. Des idées? Peut-être quelque chose en javascript pour avoir les colonnes supérieures correspondent à la largeur de la table inférieure? Je ne suis pas expert de js donc je n'ai aucune idée si c'est possible ou comment le faire. Php est aussi une option sur la table s'il existe un moyen de l'utiliser pour le résoudre.

Answer 1

J'utiliserais une largeur basée sur le pourcentage dans la colonne 'flowing' et la tamponnerais avec des colonnes de largeur fixe si nécessaire. c'est-à-dire:

<table style="width: 100%;"> 
    <tr> 
     <td style="width: 80%;">Small Length Content</td> 
    </tr> 
</table> 

<table style="width: 100%;"> 
    <tr> 
     <td style="width: 80%;">Dynamic Content Goes Here And It's Longer Than The TD Above&lt;/td> 
    </tr> 
</table> 

Answer 2

Vous pouvez utiliser CSS pour accomplir ceci. Vous devrez avoir le contenu plus long.

td{ 
    width:80%; 
} 

Answer 3

Pouvez-vous définir css pour ce contenu dynamique? Supposons que ces tables étaient imbriquées dans un div comme ceci:

<div id="content"> 
    <table> 
    <tr> 
     <td>Small Length Content</td> 
    </tr> 
    </table> 

    <table> 
    <tr> 
    <td>Dynamic Content Goes Here And It's Longer Than The TD Above</td> 
    </tr> 
    </table> 
</div> 

Je voudrais écrire une css comme ceci:

#content table td { width: 80%; } 

Answer 4

Essayez

<table> 
<tr> 
    <td style="width:200px">Small Length Content</td> 
</tr> 
</table> 

<table> 
<tr> 
    <td>Dynamic Content Goes Here And It's Longer Than The TD Above</td> 
</tr> 
</table> 

ou ajouter une classe à nommer à la td élément et définir le style ailleurs comme un fichier externe ou dans un style d'en-tête