Laravel项目Bootstrap表格数据渲染格式不符问题求助

问题说明 #

• 预期效果：表格各列内容集中在单个单元格，通过跨行合并与其他列对齐，结构紧凑（如Skills列的2个条目占据2行高度，与Abilities列的6条目标齐）。
• 实际效果：每个数组元素单独生成一行，仅对应列有内容，其余列为空，表格排版分散。

问题代码 #

<table class="table table-striped table-bordered">
<thead>
    <tr>
      <th scope="col">Skills</th>
      <th scope="col">Abilities</th>
      <th scope="col">Work Value</th>
      <th scope="col">Work Context</th>
    </tr>
</thead>
<?php
    $sub_skill = ["Skill 1","skill 2"];
    $sub_abilities = ["Ability 1","Ability 2","Ability 3","Ability 4","Ability 5","Ability 6"];
    $sub_workactivity = ["workactivity 1","workactivity 2"];
    $sub_workcontext = ["workcontext 1","workcontext 2", "workcontext 3"];
?>
<tbody>
    @foreach($sub_skill as $skill_key=>$skill_value)
           <tr>
               <td>{{ $skill_value }}</td>
               <td></td>
               <td></td>
               <td></td>
           </tr>
    @endforeach
       @foreach($sub_abilities as $abilities_key=>$abilities_value)
           <tr>
             <td></td>
             <td>{{ $abilities_value }}</td>
             <td></td>
             <td></td>
           </tr>
       @endforeach
       @foreach($sub_workactivity as $sub_workactivity_key=>$sub_workactivity_value)
           <tr>
             <td></td>
             <td></td>
             <td>{{ $sub_workactivity_value }}</td>
             <td></td>
           </tr>
       @endforeach
       @foreach($sub_workcontext as $workcontext_key=>$workcontext_value)
           <tr>
             <td></td>
             <td></td>
             <td></td>
             <td>{{ $workcontext_value }}</td>
           </tr>
       @endforeach
</tbody>
</table>

解决方案 #

通过计算各数组长度，使用HTML的rowspan属性合并对应行数的单元格，实现各列内容垂直对齐。修改后的Blade代码如下：

<?php
$sub_skill = ["Skill 1","skill 2"];
$sub_abilities = ["Ability 1","Ability 2","Ability 3","Ability 4","Ability 5","Ability 6"];
$sub_workactivity = ["workactivity 1","workactivity 2"];
$sub_workcontext = ["workcontext 1","workcontext 2", "workcontext 3"];

// 获取各数组元素数量
$skillCount = count($sub_skill);
$abilitiesCount = count($sub_abilities);
$workActivityCount = count($sub_workactivity);
$workContextCount = count($sub_workcontext);

// 以元素最多的数组长度作为表格总行数
$maxRows = max($skillCount, $abilitiesCount, $workActivityCount, $workContextCount);
?>

<table class="table table-striped table-bordered">
    <thead>
        <tr>
            <th scope="col">Skills</th>
            <th scope="col">Abilities</th>
            <th scope="col">Work Value</th>
            <th scope="col">Work Context</th>
        </tr>
    </thead>
    <tbody>
        @for($i = 0; $i < $maxRows; $i++)
        <tr>
            <!-- Skills列：仅第一行渲染单元格，合并对应行数 -->
            @if($i === 0)
            <td rowspan="{{ $skillCount }}">
                @foreach($sub_skill as $skill)
                    {{ $skill }}<br>
                @endforeach
            </td>
            @endif

            <!-- Abilities列：仅第一行渲染单元格，合并对应行数 -->
            @if($i === 0)
            <td rowspan="{{ $abilitiesCount }}">
                @foreach($sub_abilities as $ability)
                    {{ $ability }}<br>
                @endforeach
            </td>
            @endif

            <!-- Work Value列：仅第一行渲染单元格，合并对应行数 -->
            @if($i === 0)
            <td rowspan="{{ $workActivityCount }}">
                @foreach($sub_workactivity as $activity)
                    {{ $activity }}<br>
                @endforeach
            </td>
            @endif

            <!-- Work Context列：仅第一行渲染单元格，合并对应行数 -->
            @if($i === 0)
            <td rowspan="{{ $workContextCount }}">
                @foreach($sub_workcontext as $context)
                    {{ $context }}<br>
                @endforeach
            </td>
            @endif
        </tr>
        @endfor
    </tbody>
</table>

说明 #

• rowspan属性指定单元格跨越的行数，确保内容多的列单元格高度匹配；
• 仅在循环的第一行渲染对应列的单元格，避免重复生成；
• 表格总行数由元素最多的数组决定，保证所有列内容都能对齐展示。

内容的提问来源于stack exchange，提问作者Khushabu Vishwakarma