php - 调整浏览器大小或在移动设备上运行时如何布局表格

我对表（html-bootstrap）有问题。当我调整浏览器大小时，它已经坏了，如下图所示：

当我不调整浏览器大小时，第一次显示表格


调整浏览器大小后，出现了类似此图像的问题


这是我的src html表，最近我对此没有解决方案，请Plz帮助我解决它。

<div class="row">
      <div class="box col-md-12">
        <div class="box-inner">
        <div class="box-header well" data-original-title="">
        <h2><i class="glyphicon glyphicon-list"></i> TimeSheet List</h2>
        <div class="box-icon">
        <a href="#" class="btn btn-minimize btn-round btn-default"><i class="glyphicon glyphicon-chevron-up"></i></a>
      </div>
     </div>
    <div class="box-content">
     <table class="table table-bordered">
        <tbody>
            <tr>
                <th>TS ID</th>
                <th>Username</th>
                <th>Timesheet Date</th>
                <th>Date Approved</th>
                <th>From Time</th>
                <th>To Time</th>
                <th>Activity</th>
                <th>Division</th>
                <th>Department</th>
                <th>Approved By</th>
                <th colspan="2"><strong>Actions</th>
            </tr>
            <tr>
                <td rowspan="3">1</td>
                <td rowspan="3">Vasu</td>
                <td rowspan="3">2015-02-17</td>
                <td rowspan="3">2015-02-18</td>
                <td>08:30</td>
                <td>10:30</td>
                <td>CS8743</td>
                <td rowspan="3">Service</td>
                <td rowspan="3">Department 1</td>
                <td rowspan="3">Jimmy</td>
                <td colspan="2" rowspan="3">View</td>
            </tr>
            <tr>
                <td>10:30</td>
                <td>12:30</td>
                <td>CS3474</td>
            </tr>
            <tr>
                <td>13:30</td>
                <td>17:30</td>
                <td>Help</td>
            </tr>
            <tr>
                <td rowspan="2">2</td>
                <td rowspan="2">Jack</td>
                <td rowspan="2">2015-02-18</td>
                <td rowspan="2">2015-02-19</td>
                <td>08:30</td>
                <td>12:30</td>
                <td>Idle</td>
                <td rowspan="2">Hoseshop</td>
                <td rowspan="2">Department 2</td>
                <td rowspan="2">Jimmy</td>
                <td colspan="2" rowspan="2">View</td>
            </tr>
            <tr>
                <td>13:30</td>
                <td>17:30</td>
                <td>CS001</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Tim</td>
                <td>2015-02-19</td>
                <td>2015-02-20</td>
                <td>08:30</td>
                <td>17:30</td>
                <td>CS002</td>
                <td>Driver</td>
                <td>Department 3</td>
                <td>Jimmy</td>
                <td colspan="2">View</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Huey</td>
                <td>2015-02-20</td>
                <td>2015-02-21</td>
                <td>08:30</td>
                <td>17:30</td>
                <td>CS003</td>
                <td>Project</td>
                <td>Department 4</td>
                <td>Jimmy</td>
                <td colspan="2">View</td>
            </tr>
            <tr>
                <td>5</td>
                <td>Hudo</td>
                <td>2015-02-21</td>
                <td>2015-02-22</td>
                <td>08:30</td>
                <td>17:30</td>
                <td>Help</td>
                <td>Piping</td>
                <td>Department 5</td>
                <td>Jimmy</td>
                <td colspan="2">View</td>
            </tr>
          </tbody>
      </table>
     </div>
    </div>
   </div>
  </div>

l帮我！

最佳答案

用.table-response类将表包装在div中。这将使表格在较小的屏幕上滚动，但不会使整个页面滚动。

<div class="table-responsive">
    <table class="table table-bordered">...</table>
</div>

文件：http://getbootstrap.com/css/#tables-responsive