convert table cells to table rows in Iphone screen - html

Question

i have a scenerio where i have a table, inside this table is one table row (tr) and this row contains 3 table cells (td's). When browser or device size become less than 768px these td's are displayed like a row,so user do not need to scroll x-axis. Now i have issue on iphone Safari and Chrome browsers where these td's are not displayed as a row. i am using following Code.
#media only screen and (max-width: 736px) {
.tabular_structure > td {
display:table-row !important;
}
}
.table-left{
width:20%;
table-layout:fixed;
}
.table-center{
width:60%;
table-layout:fixed;
}
.table-right{
width:20%;
table-layout:fixed;
}
<table>
<tr class="tabular_structure">
<td class="table-left">
<table class="col-md-12 col-lg-12 col-sm-10 ">
<tbody>
<tr style="height:auto; width:100%;">
<td style="border-top:0px;">
</td>
</tr>
<tr>
<td>
<div>
<h5 class="customText">An Initiative</h5><br></div>
<div class="container-fluid">
<div class="offsetClass" style="display: block">
<div class="form-group col-md-6 col-6 col-lg-6">
<p class="customText" style="text-align:center">Sun Rise</p>
</div>
<div class="form-group col-md-6 col-6 col-lg-6 pull-right">
<p class="customText" style="text-align:center">Sun Set</p>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td class="col-md-8 col-lg-8 col-sm-10">
</td>
</tr>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
</td>
<td class="table-center">
<table>
<tbody>
<tr class="green-border">
<p>Second cell</p>
</tr>
</tbody>
</table>
</td>
<td class="table-right">
<p>Third Cell
</p>
</td>
</tr>
</table>