HTML - 格式化垂直表

我有一個表，看起來像這樣：HTML - 格式化垂直表

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++; 
}

來源

2017-02-16 Bluejay

一個非常簡單的方法是在達到閾值時，每次都建一個表（假設它是確定你來硬編碼門檻）。你可以做到這一點與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來顯示彼此相鄰的兩個表。

來源

2017-02-16 09:18:30 andreas

錯字：echo'';兩個表格結束標記 – JYoThI

謝謝，這個工程。只是另一個更正：應該將if條件更改爲（（$ i + 1）％$ threshold == 0 || $ i == 0），否則第一個表將不會創建，直到達到閾值。或者，只需（$ i％$ threshold == 0）。 – Bluejay

好吧，我假設在代碼中已經輸出了初始表。在這種情況下'|| $ i == 0'會導致一個空的'

'...... – andreas

HTML - 格式化垂直表

回答

相關問題