Dev Faq
6
votes

Comment créer plusieurs tables HTML ont les mêmes largeurs de colonne

J'ai plusieurs tables HTML. Chaque table présente le même nombre de colonnes, mais avec différents ensembles de données dans chaque cellule. 

 <table><tr>
     <td>Col 1 Table 1</td>
     <td>Col 2 Table 1</td>
     <td>Col 3 Table 1</td>
 </tr></table>

 <table><tr>
     <td>Col 1 Table 2</td>
     <td>Col 2 Table 2</td>
     <td>Col 3 Table 2</td>
 </tr></table>

1 commentaires

Avez-vous donné une largeur à tous td s ( mais ne donnez pas une largeur à la table )?

4 Réponses :

0
votes

Je suis sûr que avec CSS code> Vous pouvez le faire: 

td { width: 200px }

0 commentaires
1
votes

Appliquer des largeurs fixes sur le doit fonctionner. Si cela ne fonctionne pas pour vous, il existe peut-être un style qui remplace le style que vous avez spécifié ou que vous avez une erreur de syntaxe dans votre CSS. Avez-vous oublié les unités (E.G. PX, EM)? Utilisez Firebug (ou un outil similaire) pour déterminer quels styles sont appliqués / remplacés. Généralement, quelque chose de similaire à cela devrait fonctionner: xxx

Je ne sais pas si cela est réalisable pour votre codeBase, mais une autre option consiste à spécifier une table unique avec plusieurs éléments. Comme ceci: xxx

Tout balancement apparaissant entre vos 2 tables devrait également faire partie de la table la plus grande. Vous pouvez placer ce contenu dans un 3ème contenant une seule rangée et une cellule si nécessaire. Encore une fois, je ne sais pas à quel point votre code de code pourrait se prêter à ce refactoring, mais je le pose comme une option.

2 commentaires

Utilisation de plusieurs et éléments travaillés dans mon cas. Un style CSS créatif sur Éléments autorisés L'espace virtuel entre les sections les faisant apparaître comme des tables indépendantes, mais toutes les colonnes sont maintenant alignées.

Le CSS créatif a été effectué en donnant à chaque tableau trois éléments, un pour une entretoise, une pour la légende et une pour les en-têtes de colonne traditionnelles.

2
votes

Comment utilisez-vous le style CSS? Vous devez définir largeur fixe sur les cellules de la première rangée de chaque table forte>. 

<table>
  <tr>
    <td class="c1"></td>
    <td class="c2"></td>
 </tr>
 <tr>
   <td></td>
   <td></td>
 </tr>
</table>
<!-- ... -->
<table>
  <tr>
    <td class="c1"></td>
    <td class="c2"></td>
 </tr>
 <tr>
   <td></td>
   <td></td>
 </tr>
</table>

0 commentaires
2
votes

Le moyen le plus simple consiste à utiliser le sélecteur : NTH-enfant Child:

p> 

<table>
  <tr>
    <td class="column-1">Col 1 Table 1</td>
    <td class="column-2">Col 2 Table 1</td>
    <td class="column-3">Col 3 Table 1</td>
  </tr>
</table>

<table>
  <tr>
    <td class="column-1">Col 1 Table 2</td>
    <td class="column-2">Col 2 Table 2</td>
    <td class="column-3">Col 3 Table 2</td>
  </tr>
</table>

0 commentaires

Articles qui pourrait vous intéresser :

Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO
Select2 ne s'affiche pas correctement dans le mode bootstrap
Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Comment puis-je définir un format pour les nombres d'entrée dans Blazor