0

このようなシナリオを考えてみましょう。

文字列配列の配列リストがあります。

以下の画像でそれらを表現したいと思います。 ここに画像の説明を入力

現在、これをテーブルとして実装しています。しかし、これは動的ではありません。先に進むには、2回ループする必要がありますが、これは難しいようです。

<table>
    <tr>
    <td>Pack1</td>
    <td>Ch1</td>
    </tr>
    <tr>
    <td></td>
    <td>ch2</td>
    </tr>
    <tr>
    <td>Pack2</td>
    <td>val1</td>
    </tr>
    <tr>
    <td></td>
    <td>val2</td>
    </tr>
</table>

css スタイルを使用した他のアプローチを教えてください。

  1. すべてのパックをループ
  2. 再び各パックをループして値を取得します。
4

1 に答える 1

1

あなたの目標に似ていると思われるもう少し構造化された表形式を投稿しましたが、あなたが正確に何を望んでいるのかが完全に明確ではないため、これはおそらく少しホットポテトになるでしょう. colspan使用方法を知っていてrowspan、テーブルを調整できる場合 (たとえば、1 つの列に複数の行が必要な場合) は、テーブルがどのように意図され、ほとんどがデフォルトでスタイル設定されているかを検討してください。(X)HTML テーブルを利用するときにどのように機能するかを理解してもらうために、いくつかの CSS とテキストを追加しました。

ループに関する限り、テーブルのパーティションのような要素に「パッケージ」の考え方を適用できると思いますtbody...それらは同じ種類のデータの一部ですが、独自の個別のグループがあります。

これを調整するのに助けが必要な場合はコメントしてください。難しいことではありません。

<table summary="Describe your table here." style="border: 1px solid #aaa; border-collapse: collapse; width: 40%;">

<thead style="background-color: #f77;">
<tr><td colspan="3">Table Header</td></tr>
</thead>

<tfoot style="background-color: #f77;">
<tr><td colspan="3">Table Footer</td></tr>
</tfoot>


<tbody>
<tr style="background-color: #fcc;"><th colspan="3">Pack 1 (Tbody Header)</th></tr>
<tr><td>One</td><td>Two</td><td>Three</td></tr>
<tr><td>One</td><td>Two</td><td>Three</td></tr>
<tr><td>One</td><td>Two</td><td>Three</td></tr>
</tbody>


<tbody>
<tr style="background-color: #fcc;"><th colspan="3">Pack 2 (Tbody Header)</th></tr>
<tr><td>One</td><td>Two</td><td>Three</td></tr>
<tr><td>One</td><td>Two</td><td>Three</td></tr>
<tr><td>One</td><td>Two</td><td>Three</td></tr>
</tbody>

</table>
于 2014-05-30T08:06:26.390 に答える