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

结果是：

Resultingtable

问题是：客户希望所有行的宽度相等，而不是所有楼层都有相同数量的公寓。

所以我以为我会用'colspan'。（在代码echo "<td colspan=" .$total_app. ">";）

问题（2）：脚本需要在100个不同的建筑物上工作，所以任何比“colspan”的完整动态计算更少的东西都不会起作用。

根据我的理解，

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

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

所以

如何计算嵌套数组中的元素并比较它们以查看“人口最多的地板”
这样做了 - 如何计算每层公寓的colspan与该最大值的关系。（colspan只能有int（）而不是分数或百分比）
建筑物被认为是从下到上，从上到下作为一个桌子，所以我需要翻转阵列，但保持'colspan'的计算
最后但并非最不重要 - 我可能会看到这一切都错了，可能有更简单的方法来实现想要的结果（也许是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 with float：left;但是DIV的宽度需要知道。导致您的要求：所有单元格需要使用相同的宽度。

编辑1

你想要一个所有行宽度相同的解决方案，并且每行的所有单元格宽度相同???

share width in row, but all row is same width

<?
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>";
}
?>

Table vs div

编辑1：

enter image description here

限制＆amp;评论：

您需要提供外部div（.floor）宽度以进行计算
在编码中，14表示左和右。对x（app.border：1 + app.padding：2 + app.margin：4）
在编码中，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 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>';

偶数行中不均匀单元格元素的HTML表格（colspan）

4 个答案: