HTML和CSS：根據行數量添加更多的表格到屏幕上？

Question

我正在爲一個朋友開發一個網站，而這個網站會有一張數據表，但是由於他自己的原因，他不想向下滾動查看數據，他希望數據水平分散，所以他可以使用多個屏幕查看所有數據。

我想出的最好的想法是創建一個水平表，這基本上意味着，而不是向下滾動查看更多的數據，我創建一個右表到最後一個表，以容納更多的行。

因此，可以說，每個表應該有不超過20行，如果有更多的行那麼我們創建放在包含了前20行等表格的右邊的新表。

什麼是從HTML和CSS佈局的角度來做到這一點的最佳方式？我將使用dojo增強網格創建表格，網格將被動態添加，我不需要任何代碼。

所以，也許我有一個空的div元素，並將網格添加到該div並讓它們對齊？

我不是說這是要做到這一點，所以如果有人有符合我很想聽到它，並從中吸取教訓的要求，更好的方法，最好的方法。

編輯：

只是爲了澄清，我不需要JavaScript代碼或任何其他代碼動態添加的網格。

我只想知道HTML和CSS結構應該是。

例如我有一個固定的高度的容器股利，我添加元素它和元件應具有x和y的CSS屬性等

由於

Answer 1

$("#tables").append(
    $("<table style='float:left;border: 1px solid black'>").append(
     $("<tr>").append(
      $("<td>").html(
       "content" 
      ) 
     ) 
    ) 
); 

http://jsfiddle.net/7PpRB/1/

Answer 2

你應該使用PHP來做到這一點。如果你不熟悉它，你可以保持簡單。

echo '<table>'; 

for($i = 0; $i < total_elements; $i++){ 
    echo '<tr><td>'./*Whatever you want to insert.*/.'</td></tr>'; 

    if($i % 20 = 0) 
     echo '</table><table>' 
} 

echo '</table>'; 

這取決於你插入樣式。

Answer 3

你可以用div的做到這一點，並添加一個新的div當你需要一個新的信息，我不建議使用的表，因爲每次添加下一個新表，以另一種是像有不同的信息內容。

--css

.holder{ 
    width:200px; 
    float:left; 
    background:#333; 
    color:#FFF; 
    font-family:Arial; 
} 

.holder.zebra{ 
    background:#222; 
} 

.holder div.row{ 
    padding:10px; 
} 

.break{ 
    clear:both; 
    height:40px; 
    width:100%; 
    display:block; 
} 

table{ 
    margin-top:10px; 

    background:#333; 
    float:left; 
    color:#FFF; 
    font-family:Arial; 
} 

table td, table th{ 
    padding:5px; 
    text-align:left; 
} 

- 解表

<table> 
    <tr> 
    <th>title 1</th> 
    <th>title 2</th> 
    </tr> 
    <tr> 
    <td>content 1</td> 
    <td>content 2</td> 
    </tr> 
</table> 
<table> 
    <tr> 
    <th>title 1</th> 
    <th>title 2</th> 
    </tr> 
    <tr> 
    <td>content 1</td> 
    <td>content 2</td> 
    </tr> 
</table> 

- 事業部解決方案

<!-- could be the table 1 --> 
<div class="holder"> 
    <div class="row">content 1</div> 
    <div class="row">content 2</div> 
    <div class="row">content 3</div> 
</div> 
<!-- could be the table 2 --> 
<div class="holder zebra"> 
    <div class="row">content 1</div> 
    <div class="row">content 2</div> 
    <div class="row">content 3</div> 
</div> 
<!-- could be the table 3 --> 
<div class="holder"> 
    <div class="row">content 1</div> 
    <div class="row">content 2</div> 
    <div class="row">content 3</div> 
</div> 

這裏是codepen你可以看結果http://cdpn.io/sAoxB

編輯：

IM並不是說這是一個很好的做法，我只回答這個問題，請不要downvote沒有道理。感謝