Question

我的表有很多列，因此导致其宽度过大。我想让它可以水平滚动，以便它适合屏幕，它看起来更整洁有序。我猜css会隐藏属性溢出。但我不知道在哪里放我的HTML代码。希望有人可以提供帮助。

＆＃13;

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

＆＃13;

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）使用scroll

赋予wrap class overflow-x属性

overflow-x：滚动

3）使其固定宽度

宽度：300px;

4）还要注意垂直可见性

溢出-y：可见;

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

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

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

2 个答案: