在表中對齊td

Question

在下表中，當動態構造表時，Item6如何與Item2對齊？有沒有一種純CSS或css3的方式來實現這一目標？

當前表

所需的表

<table class="qe"> 
<tbody> 
    <tr> 
     <td>Item1</td> 
     <td>Item2</td> 
     <td>Item3</td> 
    </tr> 
    <tr> 
     <td>Item4</td> 
    </tr> 
    <tr> 
     <td>Item5asfasfasf</td> 
     <td>Item6</td> 
    </tr> 
</tbody> 
</table> 

小提琴：http://jsfiddle.net/jxvf9arL/1/

Answer 1

使用colspan屬性正確並刪除display:table;規則table tr，它與表格佈局搞亂：

table{ 
 
    width:500px; 
 
    border:1px solid #000; 
 
    table-layout:fixed; 
 
} 
 
table td{ 
 
    width:33%; 
 
    border:1px solid #777; 
 
    background:#eaeaea; 
 
}

<table class="qe"> 
 
    <tbody> 
 
     <tr> 
 
      <td>Item1</td> 
 
      <td>Item2</td> 
 
      <td>Item3</td> 
 
     </tr> 
 
     <tr> 
 
      <td colspan="3">Item4</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Item5asfasfasf</td> 
 
      <td colspan="2">Item6</td> 
 
     </tr> 
 
    </tbody> 
 
</table>

Answer 2

你應該添加合併單元格的TDS。 因此，如果最大列數是N，並且當前行有m列，則應該將colspan = n-m添加到行中的最後一個單元格。

此外，一些在TR stylying

table tr{ 
    display:table; 
    width:100%; 
    } 

是錯誤的。 http://jsfiddle.net/jxvf9arL/7/ 會工作