0

Codepen Example: https://codepen.io/anthonyhvelazquez/pen/oNjPrgQ

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>

  </div>
</nav>
<div class="container-fluid">
  <div class="row justify-content-center">
    <div class="col-md-3">
      <div class="content h-100" style="background: red">
        Left Side Navigation
      </div>
    </div>
    <div class="col-md-9">
      <div class="table-responsive">
                    <table class="table table-striped table-bordered table-hover">
                        <thead>
                            <tr>
                                <th>Sheet Name</th>
                            </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <td>Filler</td>
                          </tr>
                          <tr>
                            <td>Filler</td>
                          </tr>
                          <tr>
                            <td>Filler</td>
                          </tr>
                          <tr>
                            <td>Filler</td>
                          </tr>
                          <tr>
                            <td>Filler</td>
                          </tr>
                          <tr>
                            <td>Filler</td>
                          </tr>
                          <tr>
                            <td>Filler</td>
                          </tr>
                      </tbody>
        </table>
    </div>
  </div>
</div>

I am trying to create a page that has a left navigation panel and a table on the right side. Now that I have that setup, I want to modify my table so that it doesnt force my container to grow past a certain height.

  • Specifically I want the container to be (the height of the screen - the navbar) at all times whether the content under or overfills the container.

  • The table show grow to the size of the container even if the table contents are not enough to fill in the height

  • Once the table surpasses the limit of the container, it should have a vertical scroll with sticky table headers at the top

Any advice on how to get this outcome or is there a more responsive approach?

1 Answers1

0

I think you can first get the viewport dimension, and use that to minus the navbar's height.

To make the table header sticky, you can use css style

.table-wrapper-scroll-y {
  display: block;

}

.tableFixHead td {
  padding: 8px 16px;

}

.tableFixHead th {
  position: sticky;
  top: 0;
}
yjt11
  • 1
  • 1
  • I modified the code like you said and now the container is full height but is it possible to assign each column its own scroll rather than applying overflow scroll to the container-fluid – anthonyhvelazquez May 15 '20 at 16:22
  • You cannot scroll an individual column nor roll – yjt11 May 15 '20 at 16:36