需要帮助使用 colspan 设置 html 表的样式



我有动态数据,它总是可以改变的。例如:

这就是我现在拥有的:

有时像这样:

|==============|======|====|====|
|List of people|John  |June|Tom |
|Date Join     |2017  |2018|2016|
|Hobby         |soccer|         |
|Remark        | test test      |

有时我会这样:

|==============|======|======|=====|
|List of people|John  |June  |Tom  |
|Date Join     |2017  |2018  |2016 |
|Hobby         |soccer|tennis|     |
|Remark        | test test         |

我想做这样的东西:(有什么办法吗?

|==============|======|====|====|
|List of people|John  |June|Tom |
|Date Join     |2017  |2018|2016|
|Hobby         |     soccer     |
|Remark        | test test      |

或者像这样:

|==============|======|====|====|
|List of people|John  |June|Tom |
|Date Join     |2017  |2018|2016|
|Hobby         |  soccer|Tennis |
|Remark        | test test      |

这是我使用的代码:(这就是我为人员列表、日期和爱好所做的(

@foreach($object7 as $val)
    <tr>
      <th style="border: 1px black solid">List of people</th>
      <?php 
            $test = $val->people;
             $testa = rtrim($test, ', ');
            $array =  explode(', ', $testa);
            $count4 = count($array);
       ?>
       @foreach($array as $item)
      @if(($val->people == NULL) || ( $count4 <= 1))
       <td style="border: 1px black solid" colspan="8">
        @else
    <td style="border: 1px black solid" colspan="1">
      @endif
       {{$item}}
    </td>
      @endforeach 
    </tr>
     @endforeach

编辑:备注行只有 1 个值,而其余行可以有 1 个以上的值或更多。我想要的是基于这一切,我怎样才能使它们的长度相同?

尝试使用"colgroup"标签,让我们尝试设置它们的宽度以使其修复:

@foreach($object7 as $val)
<tr>
   <td style="border: 1px black solid" with="40%">List of people</td>
  <?php 
    $test = $val->people;
     $testa = rtrim($test, ', ');
    $array =  explode(', ', $testa);
    $count4 = count($array);
?>
 @foreach($array as $item)
  @if(($val->people == NULL) || ( $count4 <= 1))
      <td style="border: 1px black solid" with="60%">
  @else if($count4 == 2)
      <td style="border: 1px black solid" with="40%">
  @else
    <td style="border: 1px black solid" with="20%">
  @endif
    {{$item}}
    </td>
@endforeach 
</tr>

最新更新