'bootstrap table is not responsive

I have a table which fills data from database. Though i had use the bootstrap when i kept on decreasing the width of the browser, from one point onward the table is going outside the container. How can i make this responsive ? Following are the attached images 

 <table  class="table table-responsive table-bordered">


            <tr>
                <th>Spare Id</th>
                <th>Part Number</th>
                <th>Quantity</th>
                <th>Price</th>
                <th>Warranty</th>
                {{--<th>Description</th>--}}
                <th>Spare Image</th>

                <th>


                    <input   type="text" class="form-control" id="search" placeholder="Search Spare">
                </th>


            </tr>
            <tbody id="tableModel">
            <?php
            foreach($spares as $spare){

            ?>
            <tr>
                <td ><?php echo $spare->id;?></td>
                <td ><?php echo $spare->partNumber;?></td>
                <td ><?php echo $spare->quantity;?></td>
                <td ><?php echo 'Rs.'. $spare->price;?></td>
                <td ><?php echo $spare->warranty;?></td>


                <td><?php echo '<img  class="img-responsive"  src="data:image/jpeg;base64,'.base64_encode( $spare->image ).'"/>';?></td>
                <td>

                    <a class=" btn btn-success btn-sm" data-toggle="modal" data-target="#modalEdit" onclick="EditBrand('<?php echo $brand->brandName;?>','<?php echo $brand->id;?>')" >Edit </a>

                    <a onclick="DeleteBrand(<?php echo $brand->id;?>)" style="" class=" btn btn-danger btn-sm"  >Delete </a>

                </td>

            </tr>

            <?php }?>
            </tbody>


        </table>

This is when the normal width

When i kept on decreasing the size

csstwitter-bootstrap-3laravel-5


Solution 1:[1]

I have worked a lot n this issue and found a good solution for this bootstrap table responsiveness issue. Just use the CSS below:

.table{
   display: block !important;
   overflow-x: auto !important;
   width: 100% !important;
 }

Solution 2:[2]

Make sure one thing parent elements of <div class="table-responsive"> this element must not have more than 100% width. That means the parent element needs to have certain width

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td colspan="2">Larry the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
</div>

Solution 3:[3]

Add this line, that will solve your problem.

<div class='table-responsive'> <div style="overflow-x:auto;">

Solution 4:[4]

Make sure you checked you have inserted enough data in table. Sometimes there is just not enough data to trigger 'table-responsive' property.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Maaz Khan
Solution 2 MD SHAYON
Solution 3 Codeslide Creation
Solution 4 Ksenija Sam

Related Questions