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 に答える