How To Remove Text Overlapping In Table?

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 whe

Solution 1:

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;
}

<divclass="row"><divclass="panel panel-default"><!-- /.panel-heading --><divclass="panel-body pn"><divstyle="overflow-x:auto;"><br><divclass="table-responsive"><divclass="panel-heading"><spanclass="panel-title"><spanclass="fa fa-table"></span><fontcolor="blue">Se</font></span></div><tableclass="table table-bordered mbn"><tr><thstyle="width:8%;">Enq</th><thstyle="width:8%;">Da</th><thstyle="width:10%;">Bu</th><thstyle="width:10%;">Prop</th><thstyle="width:14%;">Pr</th><thstyle="width:10%;">District</th><thstyle="width:10%;">City</th><thstyle="width:10%;">Bedrooms</th><thstyle="width:10%;">Details</th><thstyle="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>

Solution 2:

Please Use this code

<div class="panel panel-default">
<divclass="panel-heading">Panel heading</div><divclass="panel-body"><p>Some default panel content here.</p></div><divclass="table-responsive"><tableclass="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>

Solution 3:

Please use below code

<divclass="row"><divclass="panel panel-default"><!-- /.panel-heading --><divclass="panel-body pn"><divstyle="overflow-x:auto;"><br><divclass="table-responsive"><tableclass="table table-bordered mbn"><divclass="panel-heading"><spanclass="panel-title"><spanclass="fa fa-table"></span><fontcolor="blue">Se</font></span></div><thead><tr><thstyle="width:8%;white-space:nowrap;"><fontcolor="grey">Enq</font></th><thstyle="width:8%;white-space:nowrap;"nowrap="nowrap"><fontcolor="grey">Da</font></th><thstyle="width:10%;white-space:nowrap;"><fontcolor="grey">Bu</font></th><thstyle="width:10%;white-space:nowrap;"><fontcolor="grey">Prop</font></th><thstyle="width:18%;white-space:nowrap;"><fontcolor="grey">Pr</font></th><thstyle="width:10%;white-space:nowrap;""><fontcolor="grey">District</font></th><thstyle="width:10%;white-space:nowrap;"><fontcolor="grey">City</font></th><thstyle="width:10%;white-space:nowrap;"><fontcolor="grey">Bedrooms</font></th><thstyle="width:8%;white-space:nowrap;"><fontcolor="grey" >Details</font></th><thstyle="width:8%;white-space:nowrap;"><fontcolor="grey">Update</font></th></tr></thead><tr><tdstyle="width:8%;white-space:nowrap;"></td><tdstyle="width:8%;white-space:nowrap;"></td><tdstyle="width:10%;white-space:nowrap;"></td><tdstyle="width:10%;white-space:nowrap;"></td><tdstyle="width:18%;white-space:nowrap;"></td><tdstyle="width:10%;white-space:nowrap;"></td><tdstyle="width:10%;white-space:nowrap;"></td><tdstyle="width:10%;white-space:nowrap;"></td><tdstyle="width:8%;white-space:nowrap;">Det </a></td><tdstyle="width:8%;white-space:nowrap;"> ed </a></td></tr></table></div></div></div></div></div>