具有偶數行中的甚至單元格的HTML表格（colspan）

Question

我試圖構建一個非常簡單的圖表或流程圖表示的建築物。

$floors = array( array('app_1','app_2','app_2_A'), 
          array('app_3','app_4','app_5'), 
          array('app_6','app_7', 'app_8','app_9') , 
          array('app_10','app_11', 'app_12','app_13') , 
          array('app_14','app_15', 'app_16') , 
       ); 

echo "<table border='2'>"; 

foreach ($floors as $floor) { 

    $total_app = count($floor); 

    echo "<tr>"; 

    for($i = 0;$i < $total_app; $i++){ 
     echo "<td colspan=" .$total_app. ">"; 
      echo $floor[$i] . ' (' . $total_app . ') '; //brackets only for debug 
      echo "</td>"; 
    } 

    echo "</tr>"; 

} 


echo "</table>"; 

結果是：

問題是：客戶機想要的所有行是相等的寬度，而不是所有的樓層具有相同數量的公寓。

所以我想我會用'colspan'。 （在代碼echo "<td colspan=" .$total_app. ">";）

問題（2）：腳本需要在100個不同的建築物上工作，因此任何低於「colspan」的完整動態計算都不能工作。根據我的理解，它實際上是相對於我擁有的最大單元數（元素數最多的那一行）。

如果這是真的，那麼我需要知道哪個數組元素（樓層）具有最高數量（公寓） - 然後將其設置爲標題 - 但我不知道該怎麼做。

所以

1. 我怎麼能算嵌套數組中的元素，並比較他們看到了「人口最多的地板」

2. 已經這樣做了 - 我怎麼能計算colspan每個與最大值相關的一排公寓。 （colspan可以只有int（）而不是分數或百分比）

3. 一個建築物被認爲是從下到上，從上到下作爲一個表，所以我需要翻轉數組，但保留'colspan'的計算

4. 最後但並非最不重要 - 我可能會看到這一切都錯了，可能有一個更簡單的方法來實現想要的結果（也許divs？） - 但我現在看不到一個 - 所以如果存在的話 - 請做'拍'我並給我指路..

編輯我

就像之前說：該解決方案必須爲所有配置靈活： 例子：

$floors = array( array('app_1','app_2','app_2_A','app_2_B','app_2_C', 'app_2_D'), 
           array('app_3','app_4','app_5'), 
           array('app_6','app_7') , 
           array('app_10','app_11', 'app_12','app_13') , 
           array('app_14') , 
        ); 

因此，任何試圖「硬編碼」合併單元格的計算會失敗.. 我需要的行（地板）的寬度是相等的，對於單元格（公寓）來填充每一行到滿的方式，例如如果我有2個公寓，每個寬度將爲50％，如果我有4個公寓，每個都是25％，3公寓 - 33％等。

問題是如何儘可能地用colspan或用任何其他方法來達到這個目的。

Answer 1

首先colspan是行的立柱有3列，但我想行合併所有列在單個單元格中，可以使用colspan。

<? 
$max_app = 0; 
foreach($floors as $floor){ 
    $max_app = max(count($floor), $max_app); 
} 

echo "<table border='2'>"; 
foreach($floors as $floor){ 
    echo "<tr>"; 
    for($a=0;$a<count($floor);$a++){ 
     if($a+1 == count($floor) && $a+1 < $max_app){ 
      //last cell, total number of cell in floor does not equals to $max_app 
      echo "<td colspan='" . ($max_app - $a) . "'>"; 
     }else{ 
      echo "<td>"; 
     } 
     echo $floor[$a]; 
     echo "</td>"; 
    } 
    echo "</tr>"; 
} 
echo "</table>"; 
?> 

另一種解決方案是使用DIV和float：left;但DIV的寬度需要知道。導致你的要求：所有細胞需要使用相同的寬度。

編輯1

你想一個解決方案，所有的行是相同的寬度，並且所有單元格的寬度是每行中同???

<? 
echo "<table border='0'>"; 
foreach($floors as $floor){ 
    echo "<tr><td><table border='1' width='100%'><tr>"; 
    $percent = ceil(100/count($floor)); 
    foreach($floor as $app){ 
     print("<td width='{$percent}%'>{$app}</td>"); 
    } 
    echo "</tr></table></td></tr>"; 
} 
echo "</table>"; 
?> 

Answer 2

你想是這樣的

???試試這個

$floors = array( array('app_1','app_2','app_2_A'), 
          array('app_3','app_4','app_5'), 
          array('app_6','app_7', 'app_8','app_9') , 
          array('app_10','app_11', 'app_12','app_13') , 
          array('app_14','app_15', 'app_16') , 
       ); 

echo '<div style="border:#000000 solid 2px; padding:2px;width:100%;" >'; 

foreach ($floors as $floor) { 

    $total_app = count($floor); 

    echo '<div style=" padding:2px;" > '; 

    for($i = 0;$i < $total_app; $i++){ 
     echo '<div style="border:#0000cc solid 1px; float:left; padding:2px;width:100px;" >'; 
      echo $floor[$i] . ' (' . $total_app . ') '; //brackets only for debug 
      echo '</div> '; 
    } 

    echo '</div> <br> <br> '; 

} 


echo '</div>'; 

Answer 3

替代解決方案：DIV

<style> 
    .floor{ width: 800px; border: 1px solid red; padding: 4px; margin: 6px 0px; } 
    .app{ width: 110px; float: left; padding: 2px; margin: 0px 4px; border: 1px solid blue; } 
    .spacer{clear: both; } 
</style> 

<? 
foreach($floors as $floor){ 
    echo "<div class='floor'>"; 
    for($a=0;$a<count($floor);$a++) 
     echo "<div class='app'>{$floor[$a]}</div>"; 
    echo "<div class='spacer'></div>"; 
    echo "</div>"; 
} 
?> 

編輯1：

限制&備註：

1. 需要提供外層div（.floor）寬度計算在編碼
2. ，14個裝置左右& X（app.border：1 + app.padding：2 + app.margin ：4）
在編碼
3. ，800指floor.width - （左右& X（floor.border：1 + floor.padding：4））

編碼：

<style> 
    .floor{ width: 810px; border: 1px solid red; padding: 4px; margin: 6px 0px; } 
    .app{ float: left; padding: 2px; margin: 0px 4px; border: 1px solid blue; } 
    .spacer{clear: both; } 
</style> 

<? 
foreach($floors as $floor){ 
    echo "<div class='floor'>"; 
    // 14px = 2 x (app.border: 1 + app.padding: 2 + app.margin: 4) 
    // 800px = floor.width - (2 x (floor.border: 1 + floor.padding: 4)) 
    $percent = floor(1/count($floor) * 800) - 14; 
    for($a=0;$a<count($floor);$a++) 
     echo "<div class='app' style='width: {$percent}px'>{$floor[$a]}</div>"; 
    echo "<div class='spacer'></div>"; 
    echo "</div>"; 
} 
?> 

Answer 4

正如你在上面得到了正確的答案，但這裏仍然是一個。

$floors = array( array('app_1','app_2','app_2_A'), 
          array('app_3','app_4','app_5'), 
          array('app_6','app_7', 'app_8','app_9','app_90') , 
          array('app_10','app_11', 'app_12','app_13') , 
          array('app_14','app_15', 'app_16') , 
       ); 
$maxCol = 0; 
foreach($floors as $f){ 
    $curCnt = count($f); 

    if($maxCol < $curCnt) $maxCol = $curCnt; 
} 

echo "<table border='2'>"; 

foreach ($floors as $floor) { 

    $total_app = count($floor); 
    $colSpan = $maxCol%$total_app; 

    echo "<tr>"; 

    for($i = 0;$i < $total_app; $i++){ 
     echo "<td colspan=" .(($i==($total_app-1))?$colSpan+1:1). ">"; 
      echo $floor[$i] . ' (' . $total_app . ') '; //brackets only for debug 
      echo "</td>"; 
    } 

    echo "</tr>"; 

} 


echo "</table>";