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

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

我想到的最好的主意是创建一个水平表，这基本上意味着我不需要向下滚动来查看更多数据，而是在最后一个表的右侧创建一个新表来容纳更多的行

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

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

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

我并不是说这是最好的方法，所以如果有人有更好的方法来满足要求，我很乐意听到它，并从中学习

编辑：

只是澄清一下，我不需要JavaScript代码或任何其他代码来动态添加网格

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

e、 g我有一个固定高度的容器Div，我向其中添加元素，元素应该具有x和y CSS属性等

谢谢

$（“#表格”）。附加(
$("#tables").append(
    $("<table style='float:left;border: 1px solid black'>").append(
        $("<tr>").append(
            $("<td>").html(
                "content"
            )
        )
    )
);

$（“”）。附加(
$（“”）。附加(
$（“”）。html(
“内容”
)
)
)
);

---

您可能应该使用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>';

echo'；
对于（$i=0；$i

---

插入样式取决于您。

您可以使用div，并在需要新信息时添加一个新div，我不建议使用表，因为每次在另一个表旁边添加一个新表就像是拥有不同的信息上下文一样

--css

--表解

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

标题1
标题2
内容1
内容2
标题1
标题2
内容1
内容2

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

内容1
内容2
内容3
内容1
内容2
内容3
内容1
内容2
内容3

这是代码笔，您可以查看结果

编辑：

我不是说这是一个好的做法，我只是回答问题，请不要无缘无故地投反对票。谢谢

---

这个问题需要一个只使用HTML和CSS的解决方案。我知道，但要动态创建一个新表，您不能使用HTML和CSS。如果你事先知道你要插入的元素的数量，那么你就可以使用NaHUM的答案，否则你应该考虑使用PHP（或者JavaScript）。多个表格一个表格数据集合或从表格中取出表格数据。。。我真的不能决定哪一个更糟。wtf！！为什么我得了负1？？？好。。。这两个都不是100%的好答案，而另一个表旁边的表就像在代码中说您有不同的数据显示，在数据表格上下文中使用div而不是table根本不正确，但对于IMHO来说更干净。顺便说一句，他并不是说他所有的内容都是表格数据，所以我的答案很好……他没有说他的数据不是表格数据。他只是说“我有一些数据在一张表格里”。也许它不属于一个表，但这并不意味着它也属于一个div。仅仅因为你的答案功能并不意味着它是一个好的答案。好的，如果下面没有表格或div，下面在哪里？哈哈，男人真的如果你没有什么需要帮助的，不要打扰别人回答。如果不是在div下面，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>