2

我有一个 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 可以强制表格在中断之前在一行上显示八列吗？所以创造这样的东西？

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，至少有一个选项：

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