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

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

Solution 2:

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>

Solution 3:

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>