How to size a table's height to its container

Question

I've googled this for a while, and tried a bunch of things, but none quite worked. I have a web app with a header and a footer, and a content container in between. When the content container has just some text content, all looks OK. As soon as I add a table to that content container, it changes its size to wrap the content, which moves the position of the footer. Is it possible to have the table use the remaining space of the content container instead?

This is how the html looks like:

    <!DOCTYPE html>
    <html>
    <head>
        <title>Spring Security Thymeleaf - User Management</title>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
    
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"/>
        <link rel="stylesheet" type="text/css" href="/css/style.css"/>
    
        
    </head>
    <body>
        <header>
            
        <nav class="navbar navbar-expand-md bg-dark navbar-dark">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="collapsibleNavbar">
                <ul class="nav navbar-nav navbar-left">
                    <li class="nav-item">
                        <a class="nav-link" href="/overview/index.html">Overview</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/temperatures/index.html">Statistics</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/controller/index.html">System</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/user/index.html">User Management</a>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="/?locale=en"><img src="/img/usa.png" width="24" height="24"/></a></li>
                    <li><a href="/?locale=de"><img src="/img/germany.png" width="24" height="24"/></a></li>
                </ul>
            </div>
        </nav>
    
        </header>
    
        <div class="container main-content">
            
        <div class="content body-background ">
            <h1>User Management</h1>
    
            <div class="homecontrol-table">
                <table class="table table-bordered table-striped mb-0" id="tableContent">
                    <tr>
                        <th class="sortable asc" scope="col" id="username">Username</th>
                        <th class="sortable" scope="col" id="role">Roles</th>
                        <th class="sortable" scope="col" id="user-action"></th>
                    </tr>
                    <tr>
                        <td scope="row">user</td>
                        <td>[USER]</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td scope="row">admin</td>
                        <td>[USER_ADMIN, CONTROLLER_ADMIN, USER]</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td scope="row">foo1</td>
                        <td>[USER]</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td scope="row">foo2</td>
                        <td>[USER]</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td scope="row">foo3</td>
                        <td>[USER]</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td scope="row">foo4</td>
                        <td>[USER]</td>
                        <td></td>
                    </tr>
                    </div>
                </table>
    
            </div>
    
        
        </div>
    
        <footer>
            
        <footer>
            <div class="container">
                <p>
                    &copy; okrongli.net
                    <span style="display: inline-block;">
                        | <span>Logged in user</span>: <span>manager</span> |
                        <span>Roles</span>: <span>[ROLE_CONTROLLER_ADMIN, ROLE_USER, ROLE_USER_ADMIN]</span> |
                        <a href="/logout">log out</a>
                    </span>
                </p>
            </div>
        </footer>
    
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="/js/main.js"></script>
    
    
        </footer>
    </body>
    </html>

(This html is generated through Java/Spring/Thymeleaf, but I don't think that's relevant)

Thanks,

Stefan

You cannot limit a `table`'s `width` or `height` - both will always be determined by the table's content. You need a wrapping element, e.g. a `div`, which you can give a defined height and `overflow: auto;` to make it scrollable. — connexo, Oct 27 '19 at 14:11

score 0 · Accepted Answer · answered Oct 27 '19 at 14:36

I answered a similar question before.

You could make the body a flex column (d-flex flex-column), and then limit its height to 100vh using vh-100. Then you just need overflow-auto on the container...

https://www.codeply.com/go/2t4j0YYSc0

<body class="vh-100 d-flex flex-column">
  <header>
    <nav class="navbar navbar-expand-md bg-dark navbar-dark">
        ..
    </nav>
  </header>
  <div class="container main-content overflow-auto flex-grow-1">
    <div class="content body-background ">
        <h1>User Management</h1>
        <div class="homecontrol-table">
            <table class="table table-bordered table-striped mb-0" id="tableContent">
                ..
            </table>
        </div>
    </div>
  </div>
  <footer>
    ...
  </footer>
</body>

Yep ... the funny thing is that's exactly what I had, but there was one rouge '' in the table, which messed things up. — IndyStef, Oct 27 '19 at 17:34

How to size a table's height to its container

1 Answers1