Message:

bootstrap container fluid table not responsive.i cannot find reason why.Table stands its ground unresponsive.i used an an example My First Bootstrap Page that works fine and is responsive.Understanding bootstrap.I dont want to use scroll but once table is responsive would use css.Using above stylesheet in header
//Looking for collapse horizontal to vertical instead of scroll

//css/bootstrap

      .container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl {

          width: 100%;

          padding-right: 7.5px;

          padding-left: 7.5px;

          margin-right: auto;

          margin-left: auto;

      }

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

</head>

<body>

  

<div class="container-fluid">

  <h1>My First Bootstrap Page</h1>

  <p>This part is inside a .container-fluid class.</p>

  <p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>           

</div>



<div class="card-body">

            <div class="container-fluid">

              <div class="container-fluid">

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

                    <colgroup>

                        <col width="5%">

                        <col width="13%">

                        <col width="17%">

                        <col width="10%">

                        <col width="30%">

                        <col width="10%">

                        <col width="15%">

                    </colgroup>

                    <thead>

                        <tr>

                            <th>#</th>

                            <th>Date Created</th>

                            <th>Category</th>

                            <th>Name</th>

                            <th>Description</th>

                            <th>Price</th>

                            <th>Action</th>

                        </tr>

                    </thead>

                    <tbody>

                        

                            <tr>

                                <td class="text-center"></td>

                                <td></td>

                                <td></td>

                                <td></td>

                                <td ><</p></td>

                                <td class="text-right"></td>

                                <td align="center">

                                    

                                      <div class="dropdown-menu" role="menu">

                                        <a class="dropdown-item edit_data" href="javascript:void(0)" data-id="<?php echo $row['id'] ?>"><span class="fa fa-edit text-primary"></span> Edit</a>

                                        <div class="dropdown-divider"></div>

                                        

                                      </div>

                                </td>

                            </tr>

                        <?php endwhile; ?>

                    </tbody>

                </table>

            </div>

            </div>

        </div>

          

          

      </div><div class="container-fluid">

        <h1>My First Bootstrap Page</h1>

        <p>This part is inside a .container-fluid class.</p>

        <p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>           

      </div>

My Answer:
It seems like you are trying to make a Bootstrap table responsive by using a container-fluid class. However, the table is not responding as expected.

One possible reason for this could be that the table itself is not set up to be responsive. In order for a table to be responsive in Bootstrap, you need to wrap it in a div with the class "table-responsive".

Here is an example of how you can make a Bootstrap table responsive:

html



  
















    
      
        Header 1
        Header 2
        Header 3
      
    
    
      
        Data 1
        Data 2
        Data 3

By wrapping your table in a div with the class "table-responsive", the table will become horizontally scrollable on smaller screens to ensure all content is visible.

If you want to make the table collapse into a vertical layout instead of using a scroll, you can add custom CSS to achieve this. Here is an example of how you can achieve this:

css

@media (max-width: 768px) {

  .table-responsive {

    display: block;

    width: 100%;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;

  }

  .table-responsive table {

    width: 100%;

  }

}

By adding this CSS, the table will collapse into a vertical layout on screens smaller than 768px instead of using a horizontal scroll.

I hope this helps! Let me know if you have any other questions.

Rate this post

5 of 5 based on 8783 votes

John Davidson

php - bootstrap container fluid table not responsive

Rate this post

Comments