php - 在偶数行中具有不均匀单元格元素的 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. 一个建筑物被认为是从下到上，而一个 table 是从上到下，所以我需要翻转数组，但保留'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 列，但我希望该行合并单个单元格中的所有列，您可以使用 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>";
?>