如何使用 CSS 制作可滚动的表格


how to make a scrollable table using css

我的表有很多列,因此导致其宽度超跨。 我想让它水平滚动,以便它适合屏幕,看起来更整洁和有条理。我想 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);
	$ids = $_POST['id'];
    echo "Row with Record Number: " . $ids . " has been deleted!";
    }else{
        echo "ID is empty";
    }
}
?>

在 css 中

#myTable{overflow-x: scroll}

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

1) 用具有类的div 包装表

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

2)使用滚动赋予包装类溢出-x属性

溢出-X:滚动

3)使其固定宽度

宽度:300px;

4)还要注意垂直可见性

溢出-y:可见;

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

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