The responsive table with a border has been designed. The problem is wraptexting, even when included th.nowrap in css, where data is overlapping and two horizontal lines appear when I look into the mobile view.
I had declared nowrap text in css and even td and th but its not working.
How can I solve this wraptext error?
<div class="row">
<div class="panel panel-default">
<!-- /.panel-heading -->
<div class="panel-body pn">
<div style="overflow-x:auto;">
<br>
<div class="table-responsive">
<table class="table table-bordered mbn">
<div class="panel-heading">
<span class="panel-title">
<span class="fa fa-table"></span>
<font color="blue">Se</font>
</span>
</div>
<thead>
<tr>
<th style="width:7.8%;white-space:nowrap;">
<font color="grey">Enq</font>
</th>
<th style="width:7.8%;white-space:nowrap;" nowrap="nowrap">
<font color="grey">Da</font>
</th>
<th style="width:9.9%;white-space:nowrap;">
<font color="grey">Bu</font>
</th>
<th style="width:9.9%;white-space:nowrap;">
<font color="grey">Prop</font>
</th>
<th style="width:17.9%;white-space:nowrap;">
<font color="grey">Pr</font>
</th>
<th style="width:9.8%;white-space:nowrap;">
<font color="grey">District</font>
</th>
<th style="width:9.9%;white-space:nowrap;">
<font color="grey">City</font>
</th>
<th style="width:9.8%;white-space:nowrap;">
<font color="grey">Bedrooms</font>
</th>
<th style="width:7.9%;white-space:nowrap;">
<font color="grey">Details</font>
</th>
<th style="width:7.8%;white-space:nowrap;">
<font color="grey">Update</font>
</th>
</tr>
</thead>
<tr>
<td style="width:8%;white-space:nowrap;"></td>
<td style="width:8%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:18%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:8%;white-space:nowrap;"><a>Det </a></td>
<td style="width:8%;white-space:nowrap;"><a> ed </a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
table {
width: 100%;
white-space: nowrap;
}
thead, tbody, tr, td, th {
display: block;
}
tr:after {
content: ' ';
display: block;
visibility: hidden;
clear: both;
white-space: nowrap;
}
thead th {
height: 40px;
white-space: nowrap;
/*text-align: left;*/
}
tbody {
height: 40px;
overflow-y: auto;
white-space: nowrap;
}
thead {
/* fallback */
}
tbody td, thead th {
width: 19.2%;
float: left;
white-space: nowrap;
}
I think this is what you wanted. I removed all the nowrap code, as you didn't need it to achieve the responsive layout.
The key here is to give the tables parent element position:relative;, float:left; and a width width:100%; so the table's width:100%; has a meaning. (100% of what?).
You also don't need to give every column a width. It's enough to provide widths for one row and the rest of the table will use those rules.
There was a <div> inside the table which I removed to above the table.
Here is the code: (run the snippet)
Note: the borders on the th are there just to show the width of each. I also changed the width of the widest column from 18% to 14% and gave the 4% to the last two columns (2% each).
.table-responsive
{
position:relative;
float:left;
width:100%;
}
table
{
width: 100%;
}
th
{
color:grey;
border:1px solid #000;
}
td
{
text-align:right;
}
<div class="row">
<div class="panel panel-default">
<!-- /.panel-heading -->
<div class="panel-body pn">
<div style="overflow-x:auto;">
<br>
<div class="table-responsive">
<div class="panel-heading">
<span class="panel-title">
<span class="fa fa-table"></span><font color="blue">Se</font></span>
</div>
<table class="table table-bordered mbn">
<tr>
<th style="width:8%;">Enq</th>
<th style="width:8%;">Da</th>
<th style="width:10%;">Bu</th>
<th style="width:10%;">Prop</th>
<th style="width:14%;">Pr</th>
<th style="width:10%;">District</th>
<th style="width:10%;">City</th>
<th style="width:10%;">Bedrooms</th>
<th style="width:10%;">Details</th>
<th style="width:10%;">Update</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Det</td>
<td>ed</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
Please Use this code
<div class="panel panel-default">
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>Some default panel content here.</p>
</div>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
</tbody>
</table>
</div>
Please use below code
<div class="row">
<div class="panel panel-default">
<!-- /.panel-heading -->
<div class="panel-body pn">
<div style="overflow-x:auto;">
<br>
<div class="table-responsive">
<table class="table table-bordered mbn">
<div class="panel-heading">
<span class="panel-title">
<span class="fa fa-table"></span><font color="blue">Se</font></span>
</div>
<thead>
<tr>
<th style="width:8%;white-space:nowrap;"><font color="grey">Enq</font></th>
<th style="width:8%;white-space:nowrap;" nowrap="nowrap"><font color="grey">Da</font></th>
<th style="width:10%;white-space:nowrap;"><font color="grey">Bu</font></th>
<th style="width:10%;white-space:nowrap;"><font color="grey">Prop</font></th>
<th style="width:18%;white-space:nowrap;"><font color="grey">Pr</font></th>
<th style="width:10%;white-space:nowrap;""><font color="grey">District</font></th>
<th style="width:10%;white-space:nowrap;"><font color="grey">City</font></th>
<th style="width:10%;white-space:nowrap;"><font color="grey">Bedrooms</font></th>
<th style="width:8%;white-space:nowrap;"><font color="grey" >Details</font></th>
<th style="width:8%;white-space:nowrap;"><font color="grey">Update</font></th>
</tr>
</thead>
<tr>
<td style="width:8%;white-space:nowrap;"></td>
<td style="width:8%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:18%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:8%;white-space:nowrap;">Det </a></td>
<td style="width:8%;white-space:nowrap;"> ed </a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
