On Window resize, html table columns - php

Question

I am working on making modifications to a website. I have copied the code of an html file with table and inserted my php code to generate the table. I am having issue with the table rendering on the page on window resize. Attached are the links for how the table looks when window is resize.
On window resize, my columns are becoming rows.
Table when viewed in full browser
It's a dynamically generated table using php. Here's the code: Any help would be appreciated.
Thanks in advance.
<DIV class="section-container">
<DIV id="layout" class="rsp_kvheader">
<!-- custom_1 -->
<table cellpadding="0" cellspacing="0" width="100%" border="0" style="table-layout: fixed;">
<tr>
<td>
<div align="left">
<TABLE style="background-color: #eee; background-image: url(http://eworksxl.web.com/repo/images/kv1.jpg);;;;;;;" width="100%" cellpadding="0" class="fullwidth" cellspacing="0" style="table-layout: fixed;">
<TBODY>
<TR>
<TD align="center"></TD>
</TR>
</TBODY>
</TABLE>
</div>
<br style="clear:both;">
<!-- ADD CUSTOM BLOCK -->
<div align="center" >
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: auto;">
<tr>
<td align="center" valign="top" >
<div align="left">
<DIV><img width="2000" title="" assetid="122087963" src="../../image/timesheet_1.jpg" height="550" style="width:2000px;height:370px;" border="0" alt="" mce_src="/matrix/servlet/ShowAsset;jsessionid=4C8960FFB6D8F307F69627A62EC4099A?id=122087963&_dt=1488490190826" selectedfileurl="../../files/timesheet_1.jpg"></DIV>
</div>
</td>
</tr>
</table>
</div>
<br style="clear:both;">
<div align="center" >
<table border="0" cellpadding="0" cellspacing="0" width="80%" style="table-layout: auto;">
<tr>
<td align="center" valign="top" >
<div align="left">
<TABLE width="80%" cellpadding="0" cellspacing="0" style="table-layout: auto;">
<TBODY>
<TR>
<TD align="left">
<DIV class="rsp_content section Content-1Column-Text">
<H1><?php echo $fname." ".$lname ?></H1>
<div class="container">
<div class="table-responsive">
<table class="table table-striped table-bordered" style="table-layout: auto;" width="80%">
<thead>
<tr>
<th style="text-align:center" width="5%">#</th>
<th style="text-align:center" width="19%">Date</th>
<th style="text-align:center" width="19%">Day</th>
<th style="text-align:center" width="19%">Hours</th>
</tr>
</thead>
<tbody>
<form action ="timesheet.php" method="post">
<?php
$today = date("Y-m-d");
// echo $today;
$first_day = date("Y-m-1");
// echo $first_day;
$date = $first_day;
$i=0;
$table = $empid."_user";
while (strtotime($date) <= strtotime($today)) {
// echo "$date\n";
$newDate = date("m-d-Y", strtotime($date));
$day = date("l", strtotime($date));
$i++;
$sql_statement="select hours from $table where work_date='$newDate'";
$sql_result= $conn->query($sql_statement);
// $row=mysqli_fetch_row($sql_result);
// $hour_entered=$row[0];
// echo $hour_entered;
if(($sql_result->num_rows) > 0){
$row=mysqli_fetch_row($sql_result);
$hour_entered=$row[0];
}else{
$hour_entered=null;
}
?>
<tr>
<?php if($day=="Sunday" || $day=="Saturday"){
?>
<td style="color:orange; border: double 3px black;" align="center" width="5%">
<?php echo $i ?>
</td>
<td style="color:orange; border: double 3px black;" align="center" width="19%">
<?php echo $newDate ?>
<input type="hidden" name="dates[]" value="<?php echo $newDate?>">
</td>
<td style="color:orange; border: double 3px black;" align="center" width="19%">
<?php echo $day ?>
</td>
<?php
if($hour_entered!=null){
?>
<td align="center" style="color:orange; border: double 3px black;" width="19%">
<input type="text" name="hours[]" id="hour_input" value="<?php echo $hour_entered ?>" style="text-align:center" onkeypress='return event.charCode >= 48 && event.charCode <= 57'>
<!-- <?php echo $hour_entered ?> -->
</td>
<?php
}else{
?>
<td align="center" style="color:orange; border: double 3px black;" width="19%">
<input type="text" name="hours[]" style="text-align:center" value="0" onkeypress='return event.charCode >= 48 && event.charCode <= 57'>
<!-- <?php echo $hour_entered ?> -->
</td>
<?php
}
?>
</tr>
<?php
}else{
?>
<tr>
<td align="center" width="5%">
<?php echo $i ?>
</td>
<td align="center" width="19%">
<?php echo $newDate ?>
<input type="hidden" name="dates[]" value="<?php echo $newDate?>">
</td>
<td align="center" width="19%">
<?php echo $day ?>
<!-- <input type="hidden" name="dates[]" <?php echo $day?> > -->
</td>
<?php
if($hour_entered!=null){
?>
<td align="center" width="19%">
<input type="text" name="hours[]" id="hour_input" value="<?php echo $hour_entered ?>" style="text-align:center" onkeypress='return event.charCode >= 48 && event.charCode <= 57'>
<!-- <?php echo $hour_entered ?> -->
</td>
<?php
}else{
?>
<td align="center" width="19%">
<input type="text" name="hours[]" style="text-align:center" value="0" onkeypress='return event.charCode >= 48 && event.charCode <= 57'>
<!-- <?php echo $hour_entered ?> -->
</td>
<?php
}
?>
</tr>
<?php
}
?>
<?php
$date = date ("Y-m-d", strtotime("+1 day", strtotime($date)));
}
?>
<!-- </tr> -->
<tr>
<td colspan="4" align="right">
<input type="submit" value="Submit">
</td>
</tr>
</form>
</tbody>
</table>
</div>
</div>
</DIV>
</TD>
</TR>
</TBODY>
</TABLE>
</div>
</td>
</tr>
</table>
</div>
<br style="clear:both;">
<div align="center" >
<table border="0" cellpadding="0" cellspacing="0" width="100%" >
<tr>
<td align="center" valign="top" >
<div align="left">
<TABLE style="width: 100%; background-color: #414141;" cellpadding="0" cellspacing="0">
<TBODY>
<TR>
<TD style="text-align: center;">
<SPAN style="color: #ffffff; text-decoration: none;">
<SPAN style="color: #ffffff; text-decoration: none;">
<BR><BR>Share This Page:<BR>
<div id='webcom-component-socialmediashare-17657540220791720'></div>
</SPAN>
</SPAN>
</TD>
</TR>
</TBODY>
</TABLE>
</div>
</td>
</tr>
</table>
</div>
<br style="clear:both;">
</tr>
</table>
<!-- END-OF custom_1 -->
</DIV>
</DIV>