Bootstrap datatable is not resizing and fitting with the container when i view the page in mobile -


i using bootstrap datatable in web application. when view same web page within mobile, datatable goes outside bootstrap container. in desktop, if reduce size of browser window beyond point see same behaviour

  <div class="container">             <form id="myform" class="form-horizontal"                 action=/testurl method="post" role="form">                 <div class="form-group">                     <div class="col-sm-11">                         <table id="myhist" class="table table-striped table-bordered">                             <thead>                                 <tr>                                     <th scope="col">id</th>                                     <th scope="col">name</th>                                     <th scope="col">age</th>                                 </tr>                             </thead>                             <tbody>                                 <tr>                                     <td>1</td>                                     <td>test name</td>                                     <td>40</td>                                 </tr>                                 <tr>                                     <td>2</td>                                     <td>test name2</td>                                     <td>42</td>                                 </tr>                             </tbody>                         </table>                     </div>                 </div>             </form>         </div> 

try changing

<div class="col-sm-11">  

to

<div class="table-responsive"> 

Comments

Popular posts from this blog

SVG stroke-linecap doesn't work for circles in Firefox? -

routes - Laravel 4 Wildcard Routing to Different Controllers -

cross browser - XSLT namespace-alias Not Working in Firefox or Chrome -