如何繼續2列HTML表格出現在第x行旁邊？

假設我有一個有兩列的HTML表格，大約有100行數據。我想在x行之後繼續使用它自己旁邊的表格。如何繼續2列HTML表格出現在第x行旁邊？

它目前顯示是這樣的：

|head 1| head 2| 
|------|-------| 
|data 1| data 1| 
|data 2| data 2| 
... 
|data 8| data 8|

我試圖做到的，是這樣的：

|head 1| head 2||head 1| head 2| 
|------|-------||------|-------| 
|data 1| data 1||data 5| data 5| 
|data 2| data 2||data 6| data 6| 
|data 3| data 3||data 7| data 7| 
|data 4| data 4||data 8| data 8|

我目前的解決方法就是浮動彼此相鄰的兩個表將數據拆分到後端，但我確定有更好的方法。

來源

2014-03-29 Jon Bloom

你可以用'tbody'分組增長。你可以嘗試這樣做，然後將'tbody'設置爲'display：table-cell'來並排放置它們。這裏唯一的問題是，我不知道單個表中的多個'thead'元素是否有效，因此您可能需要將每個'tbody'中的標題放在每個'tbody'中，以便讓它們正確顯示。當然，如果你仍然在後臺的某個時間點上分割數據，以便將它們分配到相應的分組上，唯一真正讓你得到的只有一張表。小提琴：http://jsfiddle.net/H4pjx/ – prodigitalson

您可以將默認display:table;更改爲inline-table;。

您可以使用class，如<table class="inline">。

table.inline { 
display:inline-table; 
vertical-align:top; /* or else as your needs */ 
}

來源

2014-03-29 17:14:31

您也可以嘗試Flexbox的爲同一如下

HTML

<div> 
    <table> 
     <tr> 
      <td>Jill</td> 
      <td>Smith</td> 
      <td>50</td> 
     </tr> 
     <tr> 
      <td>Eve</td> 
      <td>Jackson</td> 
      <td>94</td> 
     </tr> 
    </table> 
    <table> 
     <tr> 
      <td>Jill</td> 
      <td>Smith</td> 
      <td>50</td> 
     </tr> 
     <tr> 
      <td>Eve</td> 
      <td>Jackson</td> 
      <td>94</td> 
     </tr> 
    </table> 
</div>

CSS

div { 
    display: flex; 
    flex-flow: row; 
    justify-content: center; 
} 
table { 
    border:1px solid red; 
}

Demo

有用的URLS：

來源

2014-03-29 17:24:32

如何繼續2列HTML表格出現在第x行旁邊？

回答

相關問題