Entourer les cellules du tableau au coin pour être sur la même ligne avec une ligne de table avec des cellules inégales d'une autre table

Question

J'ai deux tables avec deux colonnes chacune - sur chaque tr deux éléments td. En supposant que le dernier tr de la première table a un seul élément td, il y aura un espace vide à la fin. Vous pouvez résoudre ce problème avec colspan="2". Cependant, le but est d'avoir la première cellule de la table suivante en ligne avec la dernière cellule de la première table.

Pour illustrer à l'aide d'un extrait: Je veux Tableau 2, Cell 1 pour être sur la même ligne queTableau 1, Cell 3.

#container{ 
 
    width: 160px; 
 
    background-color: orange; 
 
    color: blue; 
 
    zoom: 3.5; /* better visibility */ 
 
} 
 

 
td{ 
 
    border: 1px solid black; 
 
    width: 80px; 
 
    overflow: hidden; 
 
} 
 

 
#table-2{ 
 
    color: green; 
 
}

<div id="container"> 
 
    <table id="table-1"> 
 
    <tr> 
 
     <td>Table 1, Cell 1</td> 
 
     <td>Table 1, Cell 2</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Table 1, Cell 3</td> 
 
    </tr> 
 
    </table> 
 
    
 
    <table id="table-2"> 
 
    <tr> 
 
     <td>Table 2, Cell 1</td> 
 
     <td>Table 2, Cell 2</td> 
 
    </tr> 
 
    </table> 
 
</div>

Answer 1

En supposant que vous ne voulez vraiment deux tables, si vous déplacez le tableau 2, Cell 1 dans le tableau 1, il ne fait plus partie du tableau 2.

La seule façon de faire ce que vous demandez est de:

1. manuellement mettre le tableau 2, Cell 1 dans le tableau 1 dans le code HTML (et continuer le modèle à partir de là, y notre décision quant à savoir si vous voulez vraiment deux tables ou une grande table de jus ton), ou

2. Générez dynamiquement votre table en utilisant une infrastructure côté serveur (par ex. MVC, MVVM, PHP, JSP, etc.) pour garantir que chaque colonne est remplie, quelle que soit la table dans laquelle elle se trouve.