php table isn't complete - php

Question

i have table created inside php with css but the table isn't complete as you see in the photo from the download part. its coming half in the download part.
please someone look to my code and let me know where i gone wrong.
thank you.
my css code
<style type='text/css'>
.container3 {
float:left;
width:100%;
/*background:green;*/
overflow:hidden;
position:relative;
}
.container2 {
float:left;
width:100%;
background:#FFA500;
position:relative;
right:45%;
}
.container1 {
float:left;
width:100%;
/*background:red;*/
position:relative;
right:40%;
}
.col1 {
float:left;
width:26%;
position:relative;
left:87%;
bottom:-200px;
font-size:20px;
text-align:left;
overflow:hidden;
height:570px;
}
.col2 {
float:left;
width:50%;
position:relative;
left:90%;
overflow:hidden;
}
.col3 {
float:left;
width:26%;
position:relative;
left:80%;
overflow:hidden;
}
.footer {
border:1px solid orange;
position: relative;
padding:0px;
margin-top:-5px;
font-size:15px;
}
.signout {
position: absolute;
left: 5px;
bottom: 150px;
width: 130px;
clear: both;
font-size:20px;
text-align:center;
}
.tableClass{
margin-bottom:60px;
}
</style>
<style>
table
{
border-collapse:collapse;
}
table, td, th
{
border:1px solid black;
}
</style>
<style>
table,td,th
{
border:1px solid black;
}
td
{
text-align:center;
}
</style>
<style>
table,td,th
{
border:1px solid black;
}
table
{
width:100%;
}
th
{
height:50px%;
}
</style>
my php code
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Wellcome To Balhaf Services Customer Reports</h1>
<div class="container3 ">
<div class="container1 ">
<div class="container2 ">
<div class="col1">
View Report <br />
View Chart <br />
</div>
<?php
$username = $_POST["username"];
$password = $_POST["password"];
// Connect to the database
$dbLink = new mysqli('localhost', 'sqldata', 'sqldata', 'balhaf');
if(mysqli_connect_errno()) {
die("MySQL connection failed: ". mysqli_connect_error());
}
//for mysql injection (security reasons)
$username = mysqli_real_escape_string($dbLink, $username);
$password = mysqli_real_escape_string($dbLink, $password);
mysqli_select_db($dbLink,"balhaf2");
//checking if such data exist in our database and display result
$login = mysqli_query ($dbLink,"select * from users where USERNAME = '$username' and
PASSWORD = '$password'");
if(mysqli_num_rows($login) == 1) {
// Fetch the file information
$query = "select * from users WHERE username = '".$dbLink->escape_string($username)."'";
$result = $dbLink->query($query);
$company = false;
//Now get the result information
$row = $result->fetch_object(); //will store the record in $row
//Access what you need
if($row) {
$company = $row->company; //variable name should match the field name in your database
echo $company; //See if you get the value stored in the database
}
mysqli_select_db($dbLink,"balhaf");
// Query for a list of all existing files
$sql = "SELECT id, name, mime, size, created FROM $company";
$result = $dbLink->query($sql);
// Check if it was successfull
if($result) {
// Make sure there are some files in there
if($result->num_rows == 0) {
echo '<p>There are no files in the database</p>';
}
else {
// Print the top of a table
echo '<div class="col2">';
echo '<div align="center">';
echo '<H2 align="center"> Report Table</H></div>';
echo '<table border="1" align="center"class="tableClass">
<tr>
<td><b>Name</b></td>
<td><b>Mime</b></td>
<td><b>Size (bytes)</b></td>
<td><b>Created</b></td>
<td><b>Download</b></td>
</tr>';
// Print each file
while($row = $result->fetch_assoc()) {
echo "
<tr>
<td>{$row['name']}</td>
<td>{$row['mime']}</td>
<td>{$row['size']}</td>
<td>{$row['created']}</td>
<td><a style='text-decoration:none;'href=' get_file_work.php?id={$row['id']}&company=$company'>Download</a></td>
</tr>";
}
// Close table
echo '</table>';
echo '</div>';
}
// Free the result
$result->free();
}
else
{
echo 'Error! SQL query failed:';
echo "<pre>{$dbLink->error}</pre>";
}
// Close the mysql connection
$dbLink->close();
}
else {
echo "worng user"."</br>";
}
?>
<div class="col3">
</div>
</div>
</div>
<div class="signout">
<a style='text-decoration:none;' href= "index.html">Sign Out </br></a>
</div>
<div class="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright balhaf services 20103-2014</div>
</div>

Answer 1

Your container3 is cutting off the display of it's contents with "overflow:hidden;"
You could switch it to:
.container3 {
float:left;
width:100%;
/*background:green;*/
overflow:auto;
position:relative;
}
Or if you don't want to bleed off the edge you could either replace the filename with a download link, something like "view document". Or you could limit the number of characters allowed to show in the table cell. OR you could look into the word-break property (not reliable across all browsers) - see the link below for documentation.
W3Schools - Word-break