html - 表格中的水平滚动条以使其响应

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> 赋予宽度或外部标签。所有列都重叠，并且很小的部分是可滚动的。

如果我使用 display: block那么宽度是完美的，但如果我添加更多表格，则不会显示滚动条。因此其他表格将添加到第 1 个 10 个表格下方。

我已经尝试过 zurb table，但它没有满足我的需要。我已经搜索了将近一整天的类似问题，但找不到解决方案。

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

Answer 1

如果你让 .pull-left 使用 display: inline-block 而不是 float: left 它会停止你的表列 float 如果您还为容器 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;
}