Question

我是bootrap的新手，我需要使用Bootstrap创建一个响应式表。如何做到这一点请帮助我实现。我需要在下面做出回应的表。

提前致谢。

＆＃13;

<table class="table">
<thead>
<th>first name</th><th>second name</th><th>age</th><th>mobile no</th>
</thead>
<tbody>
  <tr>
    <td>Jill</td>
    <td>Smith</td>		
    <td>50</td>
    <td>880482048</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>		
    <td>94</td>
  <td>880482048</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>		
    <td>80</td>
  <td>880482048</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>		
    <td>80</td>
  <td>880482048</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>		
    <td>80</td>
 <td>880482048</td>
  </tr>
</tbody>

</table>

＆＃13;

Answer 1

您需要在代码中加入。只需要在表格之前加入 div class =“table-responsive”。就是这样。

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<body>

<div class="container">                                                                              
 <div class="table-responsive">          
  <table class="table">
<thead>
<th>first name</th><th>second name</th><th>age</th><th>mobile no</th>
</thead>
<tbody>
  <tr>
    <td>Jill</td>
    <td>Smith</td>		
    <td>50</td>
    <td>880482048</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>		
    <td>94</td>
  <td>880482048</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>		
    <td>80</td>
  <td>880482048</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>		
    <td>80</td>
  <td>880482048</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>		
    <td>80</td>
 <td>880482048</td>
  </tr>
</tbody>
</table>
  </div>
</div>

</body>
</html>

Answer 2

如果您想使其响应，请使用网格系统，而不是表格。这就是网格系统的用途。您仍然可以使用它来表示相同的数据。只是html会有点不同。

如何通过使用bootstrap使表响应？

2 个答案: