Question

我在html中创建了一个表，我正在为我的网页使用bootstrap。我已经将col-md-12和col-xs-12类分配给了我的表。我的表在大屏幕上运行良好，但表格行在小屏幕上超出了表格。我正在使用Mozilla Developer工具进行响应式网页设计，而我的代码无法在Iphone 6s的小屏幕上提供所需的输出。我该怎么办？代码如下：

 <table  class="table table-striped tablesorter col-md-12 col-xs-12" id = "favtable" >


  <thead >
          <tr>
             <th>Heading1 </th>
             <th >Heading2</th>
             <th >Heading3</th>
             <th >Heading4</th>
          </tr>
 </thead>

 <tbody   id = "favtable2">
 </tbody>

Answer 1

将table与div名class

包裹在一个table-responsive中

<div class="table-responsive">
    <table class="table table-striped tablesorter" id="favtable">
        <thead>
            <tr>
                <th>Heading1 </th>
                <th>Heading2</th>
                <th>Heading3</th>
                <th>Heading4</th>
            </tr>
        </thead>
        <tbody id="favtable2">
            <tr>
                <td>Heading1 </td>
                <td>Heading2</td>
                <td>Heading3</td>
                <td>Heading4</td>
            </tr>
        </tbody>
    </table>
</div>

https://jsfiddle.net/4c83kavu/1/

非常小的屏幕上的Bootstrap无法正常工作

1 个答案: