如何使用css制作可滚动表格

Question

我的表格有很多列，所以导致跨越其宽度。我想使它可以水平滚动，以便它适合屏幕，并且看起来更整齐有序。我猜css会隐藏属性溢出。但我不知道在哪里把我的HTML代码。希望有人能帮助。

<?php 
 
$serverName = "kwe-PC\SQLEXPRESS"; 
 
$connectionInfo = array("Database" => "customerdb", "UID" => "dbadmin", "PWD" => "kwe"); 
 
$conn = sqlsrv_connect($serverName, $connectionInfo); 
 
if ($conn === false) { 
 
    die(print_r(sqlsrv_errors(), true)); 
 
} 
 
//declare the SQL statement that will query the database 
 
$query = "SELECT * FROM Customer_Details"; 
 

 
//execute the SQL query and return records 
 
$result = sqlsrv_query($conn, $query) 
 
     or die(print_r(sqlsrv_errors(), true)); 
 
//Show results in table 
 

 
$o = '<table border=1 id="myTable"> 
 
     <thead> 
 
     <tr> 
 
     <th>&nbsp</th> 
 
     <th>REC NUMBER</th> 
 
     <th>CUSTOMER ID</th> 
 
     <th>CUSTOMER NAME</th> 
 
     <th>SEC-REGISTERED NAME</th> 
 
     <th>TIN NUMBER</th> 
 
     <th>STORE TYPE</th> 
 
     <th>SIZE OF BUSINESS</th> 
 
     <th>SELLER ID</th> 
 
     <th>DATE OF ESTABLISHMENT</th> 
 
     <th>TELEPHONE#/FAX</th> 
 
     <th>PAYMENT TERMS</th> 
 
     <th>SHIPPING INSTRUCTIONS</th> 
 
     <th>NUMBER OF DOORS</th> 
 
     <th>NUMBER OF WAREHOUSES</th> 
 
     <th>OWNER</th> 
 
     <th>PURCHASER/S</th> 
 
     <th>ACCOUNTING HEAD</th> 
 
     <th>WAREHOUSE HEAD</th> 
 
     <th>OTHER PERSONNEL</th> 
 
     <th>PAYMENT TERMS 2</th> 
 
     <th>COLLECTION SCHEDULE</th> 
 
     <th>DISCOUNT</th> 
 
     <th>VOLUME</th> 
 
     <th>MERCHANDISING</th> 
 
     <th>VEHICLE</th> 
 
     <th>DISTRIBUTION</th> 
 
     <th>CSL</th> 
 
     <th>ASSORTMENT</th> 
 
     <th>PRICING</th> 
 
     <th>MARGIN</th> 
 
     <th>PRICE</th> 
 
     <th>PROMOTION</th> 
 
     <th>PEOPLE</th> 
 
     <th>OTHERS</th> 
 
     <th>REPLENISHMENT ORDERS</th> 
 
     <th>ASSORTMENT/MERCHANDISING</th> 
 
     <th>NEW PRODUCTS</th> 
 
     <th>PRICING/PROMOTION</th> 
 
     <th>PICTURE</th> 
 
     </tr> 
 
     </thead><tbody>'; 
 

 
while ($record = sqlsrv_fetch_array($result)) { 
 
    $o .= '<tr><td><input type=radio name=id value=' . $record ['Rec_No'] . '></td>'; 
 
    $o .= '<td>' . $record ['Rec_No'] . '</td>'; 
 
    $o .= '<td>' . $record ['Cust_ID'] . '</td>'; 
 
    $o .='<td>' . $record ['Cust_Name'] . '</td>'; 
 
    $o .='<td>' . $record ['SEC_Name'] . '</td>'; 
 
    $o .='<td>' . $record ['TIN Number'] . '</td>'; 
 
    $o .='<td>' . $record ['Store_Type'] . '</td>'; 
 
    $o .='<td>' . $record ['Size of Business'] . '</td>'; 
 
    $o .='<td>' . $record ['Seller_ID'] . '</td>'; 
 
    $o .='<td>' . date('F d, Y', strtotime($record ['Date of Establishment'])) . '</td>'; 
 
    $o .='<td>' . $record ['Telephone/Fax'] . '</td>'; 
 
    $o .='<td>' . $record ['Payment Terms'] . '</td>'; 
 
    $o .='<td>' . $record ['Shipping Instructions'] . '</td>'; 
 
    $o .='<td>' . $record ['Number of Doors'] . '</td>'; 
 
    $o .='<td>' . $record ['Number of Warehouses'] . '</td>'; 
 
    $o .='<td>' . $record ['Owner'] . '</td>'; 
 
    $o .='<td>' . $record ['Purchaser(s)'] . '</td>'; 
 
    $o .='<td>' . $record ['Accounting Head'] . '</td>'; 
 
    $o .='<td>' . $record ['Warehouse Head'] . '</td>'; 
 
    $o .='<td>' . $record ['Other Personnel'] . '</td>'; 
 
    $o .='<td>' . $record ['Payment Terms 2'] . '</td>'; 
 
    $o .='<td>' . $record ['Collection Schedule'] . '</td>'; 
 
    $o .='<td>' . $record ['Discount'] . '</td>'; 
 
    $o .='<td>' . $record ['Volume'] . '</td>'; 
 
    $o .='<td>' . $record ['Merchandising'] . '</td>'; 
 
    $o .='<td>' . $record ['Marketing Vehicle'] . '</td>'; 
 
    $o .='<td>' . $record ['Distribution'] . '</td>'; 
 
    $o .='<td>' . $record ['CSL'] . '</td>'; 
 
    $o .='<td>' . $record ['Assortment'] . '</td>'; 
 
    $o .='<td>' . $record ['Pricing'] . '</td>'; 
 
    $o .='<td>' . $record ['Margin'] . '</td>'; 
 
    $o .='<td>' . $record ['Price'] . '</td>'; 
 
    $o .='<td>' . $record ['Promotion'] . '</td>'; 
 
    $o .='<td>' . $record ['People'] . '</td>'; 
 
    $o .='<td>' . $record ['Others'] . '</td>'; 
 
    $o .='<td>' . $record ['Replenishment Orders'] . '</td>'; 
 
    $o .='<td>' . $record ['Assortment/Merchandising'] . '</td>'; 
 
    $o .='<td>' . $record ['New Products'] . '</td>'; 
 
    $o .='<td>' . $record ['Pricing/Promotions'] . '</td>'; 
 
    $o .='<td><img height=127 width=127 src="data:image/png;base64,' . $record['image'] . '"></td>'; 
 
    $o .='</tr>'; 
 
} 
 

 
$o .= '</tbody></table>'; 
 
?> 
 
<form action="delete.php" method="POST"> 
 
    <?php echo $o; ?> 
 
    <br><input type="submit" value="Delete" name="submit"> 
 
</form> 
 
<?php 
 

 
if (isset($_POST['submit'])) { 
 
    $serverName = "kwe-PC\SQLEXPRESS"; 
 
    $connectionInfo = array("Database" => "customerdb", "UID" => "dbadmin", "PWD" => "kwe"); 
 
    $conn = sqlsrv_connect($serverName, $connectionInfo); 
 
    if ($conn === false) { 
 
     die(print_r(sqlsrv_errors(), true)); 
 
    } 
 
    if(isset($_POST['id']) && !empty($_POST['id'])){ 
 
    $sql = "DELETE FROM Customer_Details WHERE Rec_No =" . $_POST['id']; 
 
    sqlsrv_query($conn, $sql); 
 
\t $ids = $_POST['id']; 
 
    echo "Row with Record Number: " . $ids . " has been deleted!"; 
 
    }else{ 
 
     echo "ID is empty"; 
 
    } 
 
} 
 
?>

Answer 1

在CSS

#myTable{overflow-x: scroll} 

http://www.w3schools.com/cssref/css3_pr_overflow-x.asp

Answer 2

1）裹表与具有类一个div

<div class="wrap"> 
    <table> 
     ... 
    </table> 
</div> 

2）带有滚动给涡卷类溢出-x属性

溢出 - X：滚动

3）使它固定宽度

宽度：300像素;

4）另外照顾垂直能见度的

溢出-γ：可见;

.wrap { 
    overflow-x: scroll; 
    overflow-y: visible; 
    width: 300px; 
} 

Here是一个简单的工作示例。