Expanding navbar and footer to match the width of table

HTML & CSS
1

I can’t seem to find way to get my navbar and footer to match the width of my table. As you can see, my table is expanding well past them. Using HTML, CS, or JS, what is the fix for getting my navbar, footer, and table all to have the same width? I plan on using this code for similar pages with different data so simply specifying the width is not really an efficient solution here. I appreciate any help. Thank you.

Capture
Capture3829×1928 123 KB

<html>
<head>
    <style>
    html,
    body {
        margin: 0;
        width: 100%
    }

    body {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    main {
        flex: 1;
    }



    #footer-center {
        color: white;
    }

    #footer-right {
        float: right;
        color: blue;
    }

    nav .navbar navbar-expand-lg navbar-dark bg-dark {
        width: 100%
    }

    .navbar-nav li:hover>.dropdown-menu {
        display: block;
        content: none;
    }

    .dropdown-menu.show {
        background-color: #f5f6f7;
    }

    table.GeneratedTable {
      background-color: #ffffff;
      border-collapse: collapse;
      border-width: 2px;
      border-color: #ffcc00;
      border-style: solid;
      color: #000000;
    /*table-layout: fixed;        ---I've tried this
      width: 100%;*/
  }



  .footer {
    background-color: #003366;
    text-align: center;
    color: white;
    height: 30px;
    left: 0;
    bottom: 0;
    width: 100%;
    position: fixed;
}

    table.GeneratedTable td, table.GeneratedTable th {
      border-color: #ffcc00;
      border-style: solid;
    }

    table.GeneratedTable thead {
      background-color: #ffcc00;
    }

    </style>

    {% load staticfiles %}
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../../../favicon.ico">
    <title>Album example for Bootstrap</title>
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <a class="navbar-brand" href="/">
                <img src="{% static 'logo.png' %}" height="30" width="30" class="d-inline-block align-top"> Website</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">
                        <a class="nav-link" href="#">NavItem</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">NavItem</a>
                    </li>
                </ul>
            </div>
        </nav>
    </header>

    <main class='wrapper'>
        <br>
        <br>
        <table class="GeneratedTable">
          <thead>
            <tr>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
            </tr>
            <tr>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
            </tr>
            <tr>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
            </tr>
          </tbody>
        </table>
    </main>
    <div class="footer">
        <div class="container">
            <div id="footer-center">Copyright © Company Name {% now "Y" %}
                <div id="footer-right"><a href="#" class="text-muted">Back to top</a></div>
                <div style="clear: both"></div>
            </div>
        </div>
    </div>
    <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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
</body>
</html>
2

Hi, the problem is that your table is wider than the viewport whereas the other elements are only as wide as the viewport., Therefore when you scroll to see the table section that is outside of the viewport the other elements will only remain at their original size.

The easiest solution is to add a div wrap around the table and set the overflow so that a scrollbar appears below the table allowing you to scroll sideways without leaving the viewport.

.wrap {
	width:100%;
	overflow:auto;
}

In a responsive design you never want the viewport to get a horizontal scrollbar because that will break the responsiveness and also break mobile devices as they have a hard time with catering for horizontal overflow.

Your footer has been changed to position:fixed so doesn’t look like your screenshot any more and will stay a solid colour because fixed elements do not scroll out of the viewport with the document.

There are some hacks you cold use to achieve your desired outcome and adding a wrap around the table and setting its display to table will allow the header to expand.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html,body{margin:0;padding:0;}
.wrap {
	display:table;
	min-width:100%;
}
header {
	background:red;
	margin:0 0 2em;
}
h1{padding:1em ;margin:0;}
</style>
</head>

<body>
<div class="wrap">
  <header><h1>This is a header</h1></header>
  <table class="GeneratedTable">
    <thead>
      <tr>
        <th>Header</th>
        <th>Header</th>
        <th>Header</th>
        <th>Header</th>
        <th>Header</th>
        <th>Header</th>
        <th>Header</th>
        <th>Header</th>
        <th>Header</th>
        <th>Header</th>
        <th>Header</th>
        <th>Header</th>
        <th>Header</th>
        <th>Header</th>
        <th>Header</th>
        <th>Header</th>
        <th>Header</th>
        <th>Header</th>
        <th>Header</th>
        <th>Header</th>
        <th>Header</th>
        <th>Header</th>
        <th>Header</th>
        <th>Header</th>
        <th>Header</th>
        <th>Header</th>
        <th>Header</th>
        <th>Header</th>
        <th>Header</th>
        <th>Header</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
      <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
      <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
    </tbody>
  </table>
</div>
</body>
</html>

It works on its own as you can see but its likely your flex rules would not play nicely with it.

In the end the correct answer is to provide a scrollbar for the table as in my first example and make everybody happy.

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.