HTML - 格式化垂直表格

Question

我有一张如下所示的表格：

HEADER1: data1
HEADER2: data2
HEADER3: data3
HEADER4: data4
HEADER5: data5
HEADER6: data6
HEADER7: data7
HEADER8: data8

等等。我想设置一个特定的“阈值”，比如 4，之后数据将切换为如下所示（这样用户不必向下滚动太多）：

HEADER1: data1      HEADER5: data5
HEADER2: data2      HEADER6: data6
HEADER3: data3      HEADER7: data7
HEADER4: data4      HEADER8: data8

我如何以最简单的方式做这样的事情？

这是我用来生成此表的当前 PHP 代码：

foreach($row as $key=>$value) {
    echo '<tr>';
    echo '<th>', $headerindeces[$i], "</th>";
    echo '<td>',$value,'</td>';
    echo '</tr>';
    $i++;
}

Answer 1

一个非常简单的方法是在每次达到阈值时构建另一个表（假设您可以硬编码阈值）。您可以使用modulus division：

$threshold = 4;
$i = 0;
foreach ($row as $key => $value) {
    if (($i+1) % $threshold == 0) {
        echo '</table><table>';
    }
    echo '<tr>';
    echo '<th>', $headerindeces[$i], "</th>";
    echo '<td>', $value, '</td>';
    echo '</tr>';
    $i++;
}

然后，只需使用 CSS 将两个表格彼此相邻显示。