將表格單元格包裝在拐角處與表格行相同，並與另一個表格中的不均勻單元格對齊

Question

我有兩個表格，每列兩列 - 每個tr兩個td元素。假設第一個表的最後一個tr只有一個td元素，那麼末尾將會有一個空格。你可以用colspan="2"來解決這個問題。但是，目標是讓下一個表的第一個單元格與第一個表格的最後一個單元格一致。

要使用代碼段示出它：我想表2中，小區1爲在同一行上如表1，小區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

假設你真的想兩個表，如果你動表2，小區1到表1，那麼它是表的部分不再2.

唯一這樣做你所問的是：

1. 手動將表2，表1單元1中的HTML內（並且從那裏繼續格局; Y我們決定你是否真的需要兩張表或者強調大的表），或者

2. 使用服務器端框架（例如， MVC，PHP，JSP等）來確保每列都被填充，而不管它在哪個表中。