HTML和CSS：根据行数在屏幕上添加更多表格？

Question

我正在为朋友开发一个网站，这个网站将有一个数据表，但由于他自己的原因，他不想向下滚动查看数据，他希望数据水平展开，所以他可以使用多个屏幕查看所有数据。

我想出的最好的想法是创建一个水平表，这基本上意味着我不是向下滚动以查看更多数据，而是在最后一个表的右侧创建一个新表来保存其他行。

因此，假设每个表不应超过20行，如果有更多行，那么我们创建一个新表放在包含前20行的表的右侧，依此类推。

从HTML和CSS布局角度来看，最好的方法是什么？我将使用dojo增强网格创建表格，并且将动态添加网格，我不需要此部分的任何代码。

所以也许我有一个空的div元素并将网格附加到该div并使它们对齐？

我并不是说这是最好的方法，所以如果有人有更好的方法来满足要求，我很乐意听到并从中吸取教训。

编辑：

只是为了澄清我不需要JavaScript代码或任何其他代码来动态添加网格。

我只想知道HTML和CSS结构应该是什么。

例如，我有一个固定高度的容器Div，我向它添加元素，元素应该有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，我不建议使用表，因为每次在另一个旁边添加新表时都会有不同的信息上下文。< / p>

- 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>

- Div解决方案

<!-- 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>

这是您可以查看结果{cn} {/ p>的代码

编辑：

我不是说这是一个很好的做法我只回答这个问题，请不要无理由地投票。感谢