在移动视图中显示模糊的引导程序响应表
[英]Responsive table of bootstrap showing blur in mobile view
问题描述
I am using Bootstrap 3.3.7.
我正在使用 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.当我为表格使用“table-responsive”类时，它在桌面视图中清晰正确地显示，但在移动视图中，它显示模糊文本。 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.我想要那个，它在移动设备中显示表格的清晰视图，就像桌面视图一样。
1 个解决方案
解决方案1
1 已采纳 2019-07-17 11:56:38
.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.我不确定它看起来模糊的确切原因，但是当我删除边框形式.table-responsive它起作用了。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.