CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4
user2573690
user2573690

Reputation: 6013

Bootstrap table not responsive, why?

I'm using Bootstrap 4 to add a table to my webpage and am trying to make it responsive on a phone. Unfortunately, all that happens is that the table is very zoomed out, not at all responsive. How can I make this table responsive so that on the phone the table is more zoomed out/readable?

Here is my table code:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col"></div>

    <main role="main" class="col-md-9 ml-sm-auto col-lg-11 px-4">
      <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">Setup Table</h1>
      </div>

      <div class="table-responsive table-hover">
        <table class="table table-striped" id="setup-table">
          <thead>
            <tr>
              <th scope="col">Column1</th>
              <th scope="col">Column2</th>
              <th scope="col">Column3</th>
              <th scope="col">Column4</th>
              <th scope="col">Column5</th>
            </tr>
          </thead>
          <tbody>
            <div class="row text-center" style="display:flex; flex-wrap:wrap;">
              <tr>
                <th scope="row">some value</th>
                <td>some value</td>
                <td>some value</td>
                <td>some value</td>
                <td>some value</td>
              </tr>
            </div>
          </tbody>
        </table>
      </div>
    </main>
    <div class="col"></div>
  </div>
</div>

Is it because my table is in a container?

EDIT:

This is how my table looks like on the mobile phone view: enter image description here

Upvotes: 1

Views: 1009

Answers (2)

andiagungp
andiagungp

Reputation: 1

The table is already responsive. If you want it more "readable", just Add a horizontal scrollbar at the table.

Upvotes: 0

Untara Vivi Chahya
Untara Vivi Chahya

Reputation: 69

you have add meta responsive at the header

<meta name="viewport" content= "width=device-width, initial-scale=1.0">

Upvotes: 3

Related Questions