Responsive table of bootstrap showing blur in mobile view

Question

I am using Bootstrap 3.3.7. When I use 'table-responsive' class for the table it shows clear and properly in the desktop view but in mobile view, it shows blur text. Words are not showing clearly.

<div class="table-responsive">
  <table class="table"> 
    <tr>
        <th> Sr.No </th>
        <th> Company Name </th>
        <th> Contact No. </th>
        <th> Address </th>                                    
    </tr>
    <tr>
        <th> 1 </th>
        <th> ABC </th>
        <th> 1234567890 </th>
        <th> India </th>                                    
    </tr>       
    <tr>
        <th> 2 </th>
        <th> XYZ </th>
        <th> 0123456789 </th>
        <th> India </th>                                    
    </tr>                   
  </table>
</div>

I want that, it shows a clear view of the table in mobile also just like the desktop view.

Answer 1

 .table-responsive { min-height: .01%; overflow-x: auto; border: 0px !important; }

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head> <body> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="table-responsive"> <table class="table"> <tr> <th> Sr.No </th> <th> Company Name </th> <th> Contact No. </th> <th> Address </th> </tr> <tr> <th> 1 </th> <th> ABC </th> <th> 1234567890 </th> <th> India </th> </tr> <tr> <th> 2 </th> <th> XYZ </th> <th> 0123456789 </th> <th> India </th> </tr> </table> </div> </div> </div> </div> </body> </html>

I am not sure the exact reason why it is looking blurry but when i removed the border form .table-responsive it worked.

Responsive table of bootstrap showing blur in mobile view

Question

1 answers

solution1
1 ACCPTED 2019-07-17 11:56:38

Responsive table of bootstrap showing blur in mobile view

Question

1 answers

solution1 1 ACCPTED 2019-07-17 11:56:38

solution1
1 ACCPTED 2019-07-17 11:56:38