强制html表在一行上有八列

时间:2012-07-20 21:47:31

标签: html css

我有一个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

2 个答案:

答案 0 :(得分: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
}

答案 1 :(得分: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 Fiddle demo

还有一个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 Fiddle demo