Question

我正在尝试制作产品比较页面，如图所示，因为所有数据都在表格中，我通过while循环为每个产品制作单独的表格。

这是我的代码

<div style="border:1px #999999 solid; width:85%; overflow-x:auto; display:flex;" >
             <?php
                if(isset($TotalDiamonds) and $TotalDiamonds>0)
                     {
                            $CStr="select * from mst_diamond where DiamondID IN ($CompareList)";
                                if($CResult=mysql_query($CStr))
                                    {
                                        if(mysql_num_rows($CResult)>0)
                                        {
                                                    $i=0;
                                                    while($CRow=mysql_fetch_assoc($CResult))
                                                    {
                                                        $i++;
                                            ?>
                  <div class="pull-left" >
                    <table  width="100">

                      <tbody class="pull-right">

                      <tr>
                          <th><img src="img/shapes/<?php echo $CRow['Shape']; ?>.png"></th>
                        </tr>
                        <tr>
                          <td><?php echo $i; ?> of <?php echo $TotalDiamonds; ?></td>
                        </tr>
                        <tr>
                          <td><?php echo $CRow['Shape']; ?></td>
                        </tr>
                        <tr>
                          <td><?php echo $CRow['StoneID']; ?></td>
                        </tr>

                        <tr>
                          <td><?php echo $CRow['Symmetry']; ?></td>
                        </tr>
                        <tr>
                          <td><?php echo sprintf("%.2f",$CRow['Length']/$CRow['Width']); ?></td>
                        </tr>
                        <tr>
                          <td><?php echo $CRow['DepthPercent']; ?>%</td>
                        </tr>
                        <tr>
                          <td><?php echo $CRow['DTable']; ?></td>
                        </tr>

                        <tr>
                          <td><a> <?php echo $CRow['Report']; ?> </a></td>
                        </tr>
                        <tr>
                          <td><?php list($date,$time)=explode(" ",$CRow['Created']); echo $date; ?></td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                  <?php
                                                    }
                                                }
                                            }

                                            }


                                            ?>
            </div>

每次在div中重复表时，现在问题是如果我使用display: flex然后我无法给<td>提供适当的宽度，我尝试给每个<td>或外部提供宽度tag.all列是重叠的，非常小的部分是可滚动的。

如果我使用display: block，那么宽度是完美的，但如果我添加更多表格，则表示没有滚动条显示。所以其他表格将添加到前10个表格下方。

我试过了zurb表，但它没有用到我的需要。我几乎整整一天都搜索了类似的问题，但找不到解决方案。

我在这里创建了一个jsbin。 http://jsbin.com/ofiTekeF/1/ 请看一下图片，了解我想说的内容。

Answer 1

如果您使.pull-left使用display: inline-block而不是float: left，那么当屏幕变得太小时，如果您同时提供容器div样式display: inline-block和white-space: nowrap。

.pull-left{ display: inline-block; }
#containter-div/*currently styles are inline for this element*/
{
    border: 1px #999 solid;
    width: 85%;
    overflow-x: auto;
    display: inline-block;
    white-space: nowrap;
}

表中的水平滚动条使其响应

1 个答案: