如何在我的表中添加水平滾動條

Question

我想在我的表上添加水平滾動條。 我嘗試了所有的東西像溢出：滾動等 ，但它不工作在我的桌子上。 它在屏幕下方顯示另一個表格。

我在for循環中顯示多個表。 但我需要顯示單行中的所有表格，但它落在碎石之下。 PLZ建議我....

<div class="box-body table-responsive">     
     <table style="float:left;"> 
     <tr>   
     <th colspan="2" style="border:1px solid #ddd; "></th>  
     </tr> 
     <tr> 
     <td style="float:left;"> 
     <table width="100%" class="table table-bordered table-striped"> 
     <tr>  
     <th colspan="2" style="text-align:center"><?php echo $row["Edition"]; ?></th>   
     </tr>   
     <tr>  
     <td colspan="2" class="scheduletime" style="text-align:center"><?php echo $row["scheduletime"]; ?></th>   
     </tr>   
     <td>Page No</td> 
     <td>Actu.Time</td>  
     </tr>      
     <tr>      
      <td class="scheduletime" style="text-align:center"><?php echo $i; $abc = $i; ?></td> 

    <td class="actualtime"> Save</a></td></tr>   
     </table> 
     </form> 
     </td></tr></table>  
    </div> 

Answer 1

一個table是不是默認的內聯元素。
爲此，您必須將其樣式/ CSS設置爲display: inline-table。

，防止斷行，你要添加到表中的父（也許身體，這取決於您的方案）的財產white-space: nowrap;

body { 
 
    white-space: nowrap; 
 
} 
 

 
.tb { 
 
    border: 1px solid red; 
 
    width: 400px; 
 
    display: inline-table; 
 
}

<table class='tb'> 
 
    <tr> 
 
     <td>table</td> 
 
     <td>1</td> 
 
    </tr> 
 
</table> 
 
<table class='tb'> 
 
    <tr> 
 
     <td>table</td> 
 
     <td>2</td> 
 
    </tr> 
 
</table> 
 
<table class='tb'> 
 
    <tr> 
 
     <td>table</td> 
 
     <td>3</td> 
 
    </tr> 
 
</table> 
 
<table class='tb'> 
 
    <tr> 
 
     <td>table</td> 
 
     <td>4</td> 
 
    </tr> 
 
</table>