Scrolling a table if overflow using Bootstrap table-responsive

Question

I have a layout that, simplified:

Has a flex layout containing a nav on the left side that uses 15% of the view width.
Has a main taking up the remaining horizontal space.

For one view, I have a table that takes up more than the available space inside of main. I would like to scroll the table horizontally, not the entire page. I have tried doing this by wrapping the table with table-responsive using Bootstrap, however this still places a scrollbar for the entire page and not just the table/main elements like I want. table-responsive sounds like it does exactly what I want, but in my case it isn't working how I expect and I suspect I'm missing something.

div.main {
  display: flex;
  min-height: 100%;
}

div.main>nav {
  background-color: coral;
  flex: 0 0 15vw;
}

div.main>main {
  flex: auto;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="main">
  <nav>
  </nav>
  <main>
    <div class="table-responsive">
      <table class="table table-striped table-sm">
        <thead>
          <tr>
            <th></th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th>Column Name</th>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
          </tr>
          <tr>
            <th>Column Name</th>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
          </tr>
          <tr>
            <th>Column Name</th>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
          </tr>
        </tbody>
      </table>
    </div>
  </main>
</div>

Yunhai · Accepted Answer · 2019-11-21 22:04:06Z

It seems like the reason of that behavior is because table-responsive does not "respect"(to the way you want) to display: flex children (<main> in your case) because d-flex children does not have width, so the width of <main> is expanded to its available full width.

So there are two ways to fix it, either to simply delete the <main> wrapper, or set a width to <main> (see code snippet). Since your <nav> is set to 15vw, give a min-width:85%, max-width:85% or even width:85% to your class <main> should give you the desired behavior.

I personally recommend the first approach because I am not sure it's the default Bootstrap behavior or bug.

div.main {
  display: flex;
  min-height: 100%;
}

div.main>nav {
  background-color: coral;
  flex: 0 0 15vw;
}

div.main>main {
  min-width: 85%;
  flex: auto;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="main">
  <nav>
  </nav>
  <main>
    <div class="table-responsive">
      <table class="table table-striped table-sm">
        <thead>
          <tr>
            <th></th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th>Column Name</th>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
          </tr>
          <tr>
            <th>Column Name</th>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
          </tr>
          <tr>
            <th>Column Name</th>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
          </tr>
        </tbody>
      </table>
    </div>
  </main>
</div>

antonismark · Accepted Answer · 2020-11-14 18:08:30Z

0

I suggest wrapping the table with

<div class="overflow-hidden">
</div>

which eliminates the "entire page" scrollbar, and leaves you the bootstrap-table one, and looks as it should be. (that's how I solved it) table-responsive is not needed also in this case.

I cant comment the selected answer, so I will post my comment here:

display: flex

eliminates the bootstrap-table horizontal scrollbar, and leaves you with the "entire page" scrollbar. This means that to scroll down you would have to scroll all the way right to find the y scrollbar. Also to find the buttons, search, column select etc etc.

answered Nov 14, 2020 at 18:08

antonismark

213 bronze badges

Comments

Lijesh Shakya · Accepted Answer · 2024-12-08 22:00:37Z

0

Adding .table-responsive class in the div .col-md-12 worked charmed for me.

Before Code:

<div class="row">
    <div class="col-md-12">
        <div class="table-responsive">
                ....
         </div>
    </div>
</div>

After Code:

<div class="row">
    <div class="col-md-12 table-responsive">
         .....
    </div>
</div>

The extra width was adjusted and the table is responsive from .table-responsive class from Bootstrap.

answered Dec 8, 2024 at 22:00

Lijesh Shakya

2,5462 gold badges22 silver badges47 bronze badges

Collectives™ on Stack Overflow

Scrolling a table if overflow using Bootstrap table-responsive

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related