偶数行中包含 ueven 个单元格元素的 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' 的完整动态计算之外的任何东西都将不起作用。

Colspan，据我了解，实际上是相对于我拥有的最大单元格数（元素数最多的行）。

如果这是真的，那么我需要知道哪个数组元素（ floor ）具有最高计数（ apartments ） - 然后将其设置为标题 - 但我不知道该怎么做。

所以

1. 如何计算嵌套数组中的元素并比较它们以查看“人口最多的楼层”

2. 已经完成了 - 我如何计算与该最大值相关的每层公寓的colspan。 （colspan 只能有 int() 而不能有分数或百分比）

3. 建筑物被认为是从下到上，而桌子是从上到下，所以我需要翻转数组，但保留'colspan'的计算

4. 最后但并非最不重要 - 我可能看错了，可能有一种更简单的方法来实现想要的结果（也许是 div？） - 但我现在看不到 - 所以如果存在 -请“打”我，给我指路..

编辑我

如前所述：解决方案必须对所有配置都灵活： 示例：

$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') ,
                    ); 

因此，任何对 colspan 计算“硬编码”的尝试都会失败。 我需要行（楼层）的宽度相等，并且单元格（公寓）以这样的方式填充每一行，例如，如果我有 2 个公寓，如果我有，每个公寓的宽度都是 50% 4 套公寓，每套 25%，3 套公寓 - 33%，依此类推。

问题是如果可能的话，如何使用colspan 或任何其他方法来实现这一目标..

Answer 1

首先 colspan 是行的立场有 3 列，但我希望行 combine 单个单元格中的所有列，你可以使用 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：左；但需要知道 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

替代解决方案：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 - (left & right 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 3

正如你在上面得到了正确的答案，但这里也是一个。

$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>";

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') ,
                            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>';