调整大小浏览器或在移动设备上运行时，如何不破坏表的布局

Question

I have problem with table (html-bootstrap). When I resize the browser and then it has been broken Like image below:

Table Display at the first time, when i'm not resize browser

After resize browser, It has got problem like this image

This is my src html table and recently I have no solution for this, Plz help me to resolve it.

<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>

Plz. Help me!

Answer 1

Wrap the table in a div with the .table-responsive class. This will make the table scroll on smaller screens, but without making the whole page scroll.

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

Docs: http://getbootstrap.com/css/#tables-responsive