Question

foreach($model as $person)
{

        if($n % 3 == 0)
            $html = $html .'<tr>';

        $html = $html . '<td width="95px" style="text-align:center">'. student photo.'</td>';  

        $html = $html . '<td width="80px">'.name.'</td>';

        if(($n+1) % 3 == 0)
            $html = $html . '</tr>';

            $n++;
}

$html = $html . '</table>';
echo $html;

我想在每一行显示3套学生照片+名字。它显示的很好，就像我想要它一样。但是，当我只显示1或2条记录时，数据不固定。 *我希望它与3sets数据的大小/位置相同

Answer 1

我不知道你可能会对表格采用什么样式，但这就是我认为的情况：单元格可能会改变位置，因为当你只有1或2个条目时，表格只有2或者4个单元格宽，不像你有3个以上的条目，表格总是6个单元格宽。

由于您正在为名称单元格使用基于百分比的宽度，因此名称单元格会尝试计算它们的宽度，因此会产生奇怪的效果。尝试使用像素宽度作为名称单元格，使用空白单元格填充表格，或设置表格的宽度？

我看到的内容：

<h3> 3 Cells </h3>
<table>
  <tr>
    <td width="95px" style="text-align:center">Photo</td><td width="23%">First and last name</td>
    <td width="95px" style="text-align:center">Photo</td><td width="23%">First and last name</td>
    <td width="95px" style="text-align:center">Photo</td><td width="23%">First and last name</td>
  </tr>
</table>

<br/><br/>
<h3> 2 Cells </h3>
<table>
  <tr>
    <td width="95px" style="text-align:center">Photo</td><td width="23%">First and last name</td>
    <td width="95px" style="text-align:center">Photo</td><td width="23%">First and last name</td>
  </tr>
</table>

解决您问题的最简单方法 如果您要拥有完整的图片行，则插入与单元格宽度相匹配的空白单元格对。

<h3> 3 Cells </h3>
<table>
  <tr>
    <td width="95px" style="text-align:center">Photo</td><td width="23%">First and last name</td>
    <td width="95px" style="text-align:center">Photo</td><td width="23%">First and last name</td>
    <td width="95px" style="text-align:center">Photo</td><td width="23%">First and last name</td>
  </tr>
</table>

<br/><br/>
<h3> 2 Cells </h3>
<table>
  <tr>
    <td width="95px" style="text-align:center">Photo</td><td width="23%">First and last name</td>
    <td width="95px" style="text-align:center">Photo</td><td width="23%">First and last name</td>
    <td width="95px"></td><td width="23%"></td> <!-- See this pair of spacers -->
  </tr>
</table>

<br/><br/>
<h3> 1 Cell </h3>
<table>
  <tr>
    <td width="95px" style="text-align:center">Photo</td><td width="23%">First and last name</td>
    <td width="95px"></td><td width="23%"></td> <!-- See this pair of spacers -->
    <td width="95px"></td><td width="23%"></td> <!-- See this pair of spacers -->
  </tr>
</table>

假设“n”的范围在循环之外，你可以用一个类似于此的额外代码来完成这个:(我没有php方便检查它）

foreach($model as $person)
{

        if($n % 3 == 0)
            $html = $html .'<tr>';

        $html = $html . '<td width="95px" style="text-align:center">'. student photo.'</td>';  

        $html = $html . '<td width="23%">'.name.'</td>';

        if(($n+1) % 3 == 0)
            $html = $html . '</tr>';

        $n++;
}
$temp_n = n
while($temp_n % 3 !=0){
        $html = $html . '<td width="95px" ></td><td width="23%"></td>';
        if(($temp_n+1) % 3 == 0)
            $html = $html . '</tr>';
        $temp_n++;
}


$html = $html . '</table>';
echo $html;

更漂亮的解决方案：

.fixedtable{ width:100%}

.profile{
  width: 33%;
  background-color:#eee;
}

.profile .photo,
.profile .info{
  display:block;
  float:left;
}

.profile .info {padding:4px}

.clear{clear:both}

<h3> 3 Cells </h3>
<table class="fixedtable" cols="3">
  <tr>
    <td class="profile">
      <img src="http://placehold.it/95x96" class="photo"><div class="info">First and last name</div><span class="clear"></span>
    </td>
    <td class="profile">
      <img src="http://placehold.it/95x96" class="photo"><div class="info">First and last name<br/> More information</div><span class="clear"></span>
    </td>
    <td class="profile">
      <img src="http://placehold.it/95x96" class="photo"><div class="info">First and last name</div><span class="clear"></span>
    </td>
  </tr>
</table>

<br/><br/>
<h3> 2 Cells </h3>
<table class="fixedtable" cols="3">
  <tr>
    <td class="profile">
      <img src="http://placehold.it/95x96" class="photo"><div class="info">First and last name</div><span class="clear"></span>
    </td>
    <td class="profile">
      <img src="http://placehold.it/95x96" class="photo"><div class="info">First and last name</div><span class="clear"></span>
    </td>
    <td></td>
</table>

固定表格大小

1 个答案: