2

テーブルの行ごとに 4 つの列を生成する PHP 配列があります。HTMLテーブルに行ごとに8列を表示させる方法はありますか?

たとえば、私の出力が次の場合：

<tr>
<td>COL 1</td>
<td>COL 2</td>
<td>COL 3</td>
<td>COL 4</td>
</tr>
<tr>
<td>COL 5</td>
<td>COL 6</td>
<td>COL 7</td>
<td>COL 8</td>
</tr>
<tr>
<td>COL 9</td>
<td>COL 10</td>
<td>COL 11</td>
<td>COL 12</td>
</tr>
<tr>
<td>COL 13</td>
<td>COL 14</td>
<td>COL 15</td>
<td>COL 16</td>
</tr>

ディスプレイは次のようになります。

COL 1 COL 2 COL 3 COL 4
COL 5 COL 6 COL 7 COL 8
COL 9 COL 10 COL 11 COL 12
COL 13 COL 14 COL 15 COL 16

とにかく CSS または HTMl で、テーブルが壊れる前に 1 行に 8 列を表示するように強制することはできますか? だから、このようなものを作成しますか？

COL 1 COL 2 COL 3 COL 4      COL 5 COL 6 COL 7 COL 8
COL 9 COL 10 COL 11 COL 12   COL 13 COL 14 COL 15 COL 16
4

2 に答える 2

3

PHPを変更して正しい方法でフォーマットするか、divを使用してそれに応じてスタイルを設定します。ただし、真の表形式のデータIDがテーブルを使用し、PHPを修正して必要なものを表す場合。

PHPではそれほど難しいことではありません。たとえば、カウンターを作成し、そのカウンターが％2 == 0のときに、行を終了して新しい行を開始することができます。それに応じてカウンターを増やします。

擬似コード

現在、あなたはこのようなものを持っています。

for($i = 0; $i < numRows; $i++) {
    output a <tr> tag

    output <td> tags and data

    output a closing </tr> tag
}

あなたがする必要があるのはこのようなものです。

for($i = 0; $i < numRows; $i++)  {
    if($i % 2 == 0)
        output startting <tr> tag

    output some <td> tags with data

    if(($i +1) % 2 == 0)
        output closing <tr> tag
}

Alternatleyは、ブールフラグを使用できます。

is_even_row = ture;
for each row {
    if(is_even_row)
        output start tag

    output data for row

    if(not is_even_row)
        output end tag

    is_even_row = not is_even_row
}
于 2012-07-20T21:50:32.377 に答える
2

この問題に取り組む正しい方法は、目的に応じて間違ったHTMLレイアウトを生成しているPHPを修正することです。つまり、CSSには、少なくとも1つのオプションがあります。

table {
    disply: block;
    width: 90%;
    margin: 1em auto;
    border: 1px solid #000;
}

tr {
    display: block;
    width: 50%;
    float: left;
    margin: 0;
    padding: 0;
}

td {
    display: inline-block;
    width: 20%;
    border: 1px solid #000;
}​

JSフィドルデモ。

JavaScriptソリューションもあります（利用可能な場合）：

var table = document.getElementsByTagName('table')[0],
    rows = table.getElementsByTagName('tr');

for (var i=rows.length - 1; i>=0; i--){
    if (i%2 == 1 && i !== 0){
        var prev = rows[i].previousElementSibling;
        while (rows[i].firstChild){
            prev.appendChild(rows[i].firstChild);
        }
        rows[i].parentNode.removeChild(rows[i]);
    }
}​

JSフィドルデモ。

于 2012-07-20T21:55:28.440 に答える