這兩行到一個與CSS

Question

是否有可能用CSS來改變正常的表像這樣的外觀：

+-----------+-----------+ 
| Row1Cell1 | Row1Cell2 | 
+-----------+-----------+ 
| Row2Cell1 | Row2Cell2 | 
+-----------+-----------+ 
| Row3Cell1 | Row3Cell2 | 
+-----------+-----------+ 
| Row4Cell1 | Row4Cell2 | 
+-----------+-----------+ 
| Row5Cell1 | Row5Cell2 | 
+-----------+-----------+ 
| Row6Cell1 | Row6Cell2 | 
+-----------+-----------+ 

進入這個：

+-----------+-----------+-----------+-----------+ 
| Row1Cell1 | Row1Cell2 | Row2Cell1 | Row2Cell2 | 
+-----------+-----------+-----------+-----------+ 
| Row3Cell1 | Row3Cell2 | Row4Cell1 | Row4Cell2 | 
+-----------+-----------+-----------+-----------+ 
| Row5Cell1 | Row5Cell2 | Row6Cell1 | Row6Cell2 | 
+-----------+-----------+-----------+-----------+ 

我想要做的是使兩個（或者甚至三個）<tr>在同一視覺行上。 我想在不使用javascript的情況下完成此操作。

關於奧斯卡

Answer 1

如果你不知道你的<tr> S如何廣泛，你可以使用這個：

HTML

<table> 
    <tbody> 
     <tr> 
      <td>1 1</td> 
      <td>1 2</td> 
     </tr> 
     <tr> 
      <td>2 1</td> 
      <td>2 2</td> 
     </tr> 
     <tr> 
      <td>3 1</td> 
      <td>3 2</td> 
     </tr> 
     <!-- more stuff here --> 
    </tbody> 
</table> 

CSS

tr { 
    float: left; 
} 

tr:nth-child(3n+1) { 
    clear: left; 
} 

它讓<tr>浮動，但不時斷裂。您可以使用:nth-child選擇器來控制何時發生這種情況。在這種情況下（:nth-child(3n+1)）它每隔三行就會中斷。每隔一排使用2n+1即可休息，最後n+1從一開始就帶回您的原始訂單。我希望這有幫助。

演示

Try before buy

^{的說明：我在Safari，Chrome和Firefox，但不是在IE測試這一點 - 沒有時間來啓動虛擬機。}

PS：如果你知道你的<tr> S如何廣泛，你可以只是tr { float: left; }並通過設置表的總寬度，使得1，2或3行將水平有足夠的空間做。