I am working with two tables, each containing two columns – meaning there are two td elements for every tr. If the last tr of the first table has only one td element, it will result in a blank space at the end. This issue can be resolved by using colspan="2". However, my objective is to ensure that the first cell of the second table aligns with the last cell of the first table.
To better explain this scenario, I aim to have Table 2, Cell 1 positioned on the same line as Table 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>