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

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; 
}