how to make a scrollable table using css - php

Question

my table has many columns so it resulted to over-spanning in its width. i want to make it scrollable horizontally so that it would fit in the screen and it will look more neat and organized. I guess css will do with property overflow hidden. but I dont know where to put my html codes. hope someone can help.
<?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";
}
}
?>

Answer 1

In css
#myTable{overflow-x: scroll}
http://www.w3schools.com/cssref/css3_pr_overflow-x.asp

Answer 2

1) Wrap table with a div which has a class
<div class="wrap">
<table>
...
</table>
</div>
2) Give wrap class overflow-x property with scroll
overflow-x: scroll
3) Make it fixed width
width: 300px;
4) Also take care of vertically visibility
overflow-y: visible;
.wrap {
overflow-x: scroll;
overflow-y: visible;
width: 300px;
}
Here is a simple working example.