0

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

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

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

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

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

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

编辑：

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

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

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

谢谢

4

3 回答 3

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

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

于 2013-03-06T15:42:59.103 回答
-1

您可以使用 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>

这是您可以查看结果的代码笔http://cdpn.io/sAoxB

编辑：

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

结果

于 2013-03-06T15:45:57.660 回答
-1

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

插入样式由您决定。

于 2013-03-06T15:44:27.740 回答