title: horizontal scroll bar in table for making it responsive
body: <p>I am trying to make a product compare page, as you can see in image, for that all the data is in table, im making individual table for each product by while loop.</p>
  
  <p>and here's my code</p>
  
  <pre><code>&lt;div style="border:1px #999999 solid; width:85%; overflow-x:auto; display:flex;" &gt;
               &lt;?php
                  if(isset($TotalDiamonds) and $TotalDiamonds&gt;0)
                       {
                              $CStr="select * from mst_diamond where DiamondID IN ($CompareList)";
                                  if($CResult=mysql_query($CStr))
                                      {
                                          if(mysql_num_rows($CResult)&gt;0)
                                          {
                                                      $i=0;
                                                      while($CRow=mysql_fetch_assoc($CResult))
                                                      {
                                                          $i++;
                                              ?&gt;
                    &lt;div class="pull-left" &gt;
                      &lt;table  width="100"&gt;
  
                        &lt;tbody class="pull-right"&gt;
  
                        &lt;tr&gt;
                            &lt;th&gt;&lt;img src="img/shapes/&lt;?php echo $CRow['Shape']; ?&gt;.png"&gt;&lt;/th&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                            &lt;td&gt;&lt;?php echo $i; ?&gt; of &lt;?php echo $TotalDiamonds; ?&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                            &lt;td&gt;&lt;?php echo $CRow['Shape']; ?&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                            &lt;td&gt;&lt;?php echo $CRow['StoneID']; ?&gt;&lt;/td&gt;
                          &lt;/tr&gt;
  
                          &lt;tr&gt;
                            &lt;td&gt;&lt;?php echo $CRow['Symmetry']; ?&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                            &lt;td&gt;&lt;?php echo sprintf("%.2f",$CRow['Length']/$CRow['Width']); ?&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                            &lt;td&gt;&lt;?php echo $CRow['DepthPercent']; ?&gt;%&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                            &lt;td&gt;&lt;?php echo $CRow['DTable']; ?&gt;&lt;/td&gt;
                          &lt;/tr&gt;
  
                          &lt;tr&gt;
                            &lt;td&gt;&lt;a&gt; &lt;?php echo $CRow['Report']; ?&gt; &lt;/a&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                            &lt;td&gt;&lt;?php list($date,$time)=explode(" ",$CRow['Created']); echo $date; ?&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                        &lt;/tbody&gt;
                      &lt;/table&gt;
                    &lt;/div&gt;
                    &lt;?php
                                                      }
                                                  }
                                              }
  
                                              }
  
  
                                              ?&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>every time table is being repeated in div, now the problem is If i use <code>display: flex</code> then  i cant give proper width to <code>&lt;td&gt;</code>, i tried giving width to every <code>&lt;td&gt;</code> or external  tag.all columns are overlapped,and very small part is scrollable.</p>
  
  <p>If i use <code>display: block</code> then width is perfect but if i add more tables then there is no scroll bar is showing.so other tables will be added below the 1st 10 tables.</p>
  
  <p>i have tried zurb table,but it didnt work my need. I have searched SO for similar questions for almost full day, but could not find solution.</p>
  
  <p>i have created a jsbin here. <a href="http://jsbin.com/ofiTekeF/1/" rel="nofollow noreferrer">http://jsbin.com/ofiTekeF/1/</a> 
  please take a look at image also to understand what im trying to say.      </p>
  
  <p><a href="https://i.stack.imgur.com/KnCfW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KnCfW.png" alt=""></a></p>