Faire 2 tables ont les mêmes tailles de colonnes

J'ai 2 tables HTML qui sont directement au-dessus des autres. Chaque table a le même nombre de colonnes, mais le texte qu'ils contiennent peuvent différer. Et chaque table peut contenir plusieurs lignes. Je voudrais pour ces 2 tables ont exactement la même largeur de colonne, de sorte que les colonnes de toujours ligne. Je n'ai pas l'esprit si le texte dans les colonnes des enveloppements autant que nécessaire. Et je ne peut pas combiner toutes les lignes dans une table unique pour d'autres raisons.

Est-il un moyen pour que cela se produise?

Noter que cette solution n'a qu'à travailler dans Firefox et les 2 dernières versions de IE.

source d'informationauteur Shane | 2009-07-31

  1. 4

    Je vous suggérons d'utiliser le pourcentage de largeurs vos colonnes, en s'assurant que ceux des largeurs de toujours ajouter jusqu'à 100%.

    <style type="text/css">
  table { width: 100%; }
  td.colA { width: 30%; }
  td.colB { width: 70%; }
</style>

<table>
  <tr>
   <td class="colA">Lorem ipsum</td>
   <td class="colB">Lorem ipsum</td>
  </tr>
</table>

<table>
  <tr>
   <td class="colA">Lorem ipsum</td>
   <td class="colB">Lorem ipsum</td>
  </tr>
</table>
  2. 2

    Comme je sais que vous ne pouvez pas aligner les colonnes des deux tables.

    Vous pouvez créer un tableau et utiliser les css pour la faire ressembler à deux.

    <table>
  <tr> <!-- First table header --> </tr>
  <tr> <!-- First table rows... --></tr>
  <tr> <!-- First table footer... --></tr>
  <tr> <!-- Empty space between tables --> </tr>
  <tr> <!-- Second table header --> </tr>
  <tr> <!-- Second table rows... --></tr>
  <tr> <!-- Second table footer... --></tr>
</table>
  3. 0

    Les cellules du tableau sont fluides, par nature, de sorte que n'est pas possible en html /css, sauf si vous donnez les colonnes de largeur fixe (fixe peut également être un pourcentage).

    Vous pouvez bien sûr utiliser javascript pour trouver la plus large de la table, son largeurs de colonne et d'utiliser ces valeurs pour la plus petite table, mais la solution proposée par belugabob un commentaire à votre question est beaucoup mieux.

  4. 0

    J'ai eu une situation similaire fixe pour mon site web sur internet explorer 9, Chrome 14 et FireFox 8 avec la suite
    Ma table contient quatre colonnes, impairs contiennent des étiquettes et contient même des entrées. J'ai quatre tables sur ma page et de toutes les colonnes de chaque table sont alignés verticalement. Espérons que ces mesures d'aide

    1 - Télécharger une image transparente à partir de n'importe où, sans doute de taille 1x1, de sorte que vous pouvez ajuster sa taille selon votre besoin (pas sûr si une image peut être réduit trop par css)

    2 - Définissez votre table comme 

        <table class="formed">
            <tr>
                <th class="colLabel"></th>
                <th class="colField"></th>
                <th class="colLabel"></th>
                <th class="colField"></th>
            </tr>
        <tr>
            <td></td>
[now rest of your columns row by row]

    3 - Définir votre css 

    .colLabel
{
    text-align:right;
    padding-right:0em;
    height:auto;
    background-image:url(Resources/Images/transparent.gif);
    background-repeat:no-repeat;
    width:8em;
}
.colField
{
    text-align:left;
    padding-right:0em;
    height:auto;
    background-image:url(Resources/Images/transparent.gif);
    background-repeat:no-repeat;
    width:20em; 
}

.formed
{
    width:90%;
    table-layout:fixed;
    padding:0;
    margin:0;
}