1

Using W3.CSS I'm trying to create a page that has 3 main elements, a header row, a scrollable table and a footer.

When the table row size is larger than can be displayed in the browser window a user should be able to scroll down using a vertical scroll bar defined in the table's w3-container.

It neeeds to cope with the user resizing the browser window and various screen sizes. The user should always be able to see the header, scrollable table and footer.

I've tried various sitcky footer solutions I've found online but can't get them to work with the w3-container class I am enclosing my table within.

Any suggestions ?

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Responsive Page</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <script>
    </script>
    <style>
    </style>
  </head>
  <body class="w3-light-grey">
        <div class="w3-row-padding">
            <div class="w3-col" style="width:50%"><p>A value</p></div>
            <div class="w3-col" style="width:50%"><p>Another value</p></div>
        </div>
        <div class="w3-row-padding">
            <div class="w3-col" style="width:100%">
                <div class="w3-container w3-padding-8" style="overflow-y:scroll">
                    <h5>Records</h5>
                    <table id="dataTable" border="0" class="w3-table-all w3-card-4">
                        <tr><th>Field1</th><th>Field2</th><th>Field3</th><th>Field4</th></tr>
                        <tr><td>First Value</td><td>First Value</td><td>First Value</td><td>First Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Last Value</td><td>Last Value</td><td>Last Value</td><td>Last Value</td></tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="w3-row-padding">
            <p>Footer</p>
        </div>
  </body>
</html>
David
  • 14,047
  • 24
  • 80
  • 101
  • When I copied your code, it seems that closing divs are missing. Three actually, two before
    and third you have to correct, the last one is opening div. Then I added ID "footer" on last div. Style - for body I put relative position, and for footer id position: sticky; bottom: 0;
     – Boris P Feb 13 '19 at 12:42
  • Boris P, thanks for spotting my div mistake in the code. I fixed that and tried your suggestion. Unfortunately your suggested fix didn't work for my. It fixes the footer at the bottom of the screen but the row scrolling is not kept within the w3-container and you need to scroll using the browser scroll bar to see all table rows which are rendered underneath the fixed footer. – David Feb 13 '19 at 13:37

1 Answers1

2

Here is a solution with grid:

body {
  display: grid;
  grid-template-rows: auto 1fr auto;

  /* you may want to set `height` of `html` and `body` to `100%` instead of this
  https://developers.google.com/web/updates/2016/12/url-bar-resizing */
  height: 100vh;
}

.header > .w3-col {
  width: 50%;
}

.table-container {
  min-height: 0;
}

.table-container > .w3-col, .table-container .w3-container {
  height: 100%;
}

.table-container .w3-container {
  overflow-y: scroll;
}

#dataTable {
  border: 0;
}
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Responsive Page</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  </head>
  <body class="w3-light-grey">
        <div class="w3-row-padding header">
            <div class="w3-col"><p>A value</p></div>
            <div class="w3-col"><p>Another value</p></div>
        </div>
        <div class="w3-row-padding table-container">
            <div class="w3-col">
                <div class="w3-container w3-padding-8">
                    <h5>Records</h5>
                    <table id="dataTable" class="w3-table-all w3-card-4">
                        <tr><th>Field1</th><th>Field2</th><th>Field3</th><th>Field4</th></tr>
                        <tr><td>First Value</td><td>First Value</td><td>First Value</td><td>First Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Last Value</td><td>Last Value</td><td>Last Value</td><td>Last Value</td></tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="w3-row-padding footer">
            <p>Footer</p>
        </div>
  </body>
</html>

I don't have much knowledge of grid, so if you are going to use this solution I would encourage you to research grid as there may be a better/clearer way.

Here is a Flexbox solution:

body {
  display: flex;
  flex-direction: column;

  /* you may want to set `height` of `html` and `body` to `100%` instead of this
  https://developers.google.com/web/updates/2016/12/url-bar-resizing */
  height: 100vh;
}

.header, .footer {
  flex: none;
}

.header > .w3-col {
  width: 50%;
}

.table-container {
  flex: auto;
  min-height: 0;
}

.table-container > .w3-col, .table-container .w3-container {
  height: 100%;
}

.table-container .w3-container {
  overflow-y: scroll;
}

#dataTable {
  border: 0;
}
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Responsive Page</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  </head>
  <body class="w3-light-grey">
        <div class="w3-row-padding header">
            <div class="w3-col"><p>A value</p></div>
            <div class="w3-col"><p>Another value</p></div>
        </div>
        <div class="w3-row-padding table-container">
            <div class="w3-col">
                <div class="w3-container w3-padding-8">
                    <h5>Records</h5>
                    <table id="dataTable" class="w3-table-all w3-card-4">
                        <tr><th>Field1</th><th>Field2</th><th>Field3</th><th>Field4</th></tr>
                        <tr><td>First Value</td><td>First Value</td><td>First Value</td><td>First Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Last Value</td><td>Last Value</td><td>Last Value</td><td>Last Value</td></tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="w3-row-padding footer">
            <p>Footer</p>
        </div>
  </body>
</html>

Here is a hacky way with calc:

body {
  /* you may want to set `height` of `html` and `body` to `100%` instead of this
  https://developers.google.com/web/updates/2016/12/url-bar-resizing */
  height: 100vh;
}

.header > .w3-col {
  width: 50%;
}

.table-container {
  /* values taken from browser's inspector */
  --header-height: 52.5px;
  --footer-height: 52.5px;

  height: calc(100% - var(--header-height) - var(--footer-height));
}

.table-container > .w3-col, .table-container .w3-container {
  height: 100%;
}

.table-container .w3-container {
  overflow-y: scroll;
}

#dataTable {
  border: 0;
}
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Responsive Page</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  </head>
  <body class="w3-light-grey">
        <div class="w3-row-padding header">
            <div class="w3-col"><p>A value</p></div>
            <div class="w3-col"><p>Another value</p></div>
        </div>
        <div class="w3-row-padding table-container">
            <div class="w3-col">
                <div class="w3-container w3-padding-8">
                    <h5>Records</h5>
                    <table id="dataTable" class="w3-table-all w3-card-4">
                        <tr><th>Field1</th><th>Field2</th><th>Field3</th><th>Field4</th></tr>
                        <tr><td>First Value</td><td>First Value</td><td>First Value</td><td>First Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Value</td><td>Value</td><td>Value</td><td>Value</td></tr>
                        <tr><td>Last Value</td><td>Last Value</td><td>Last Value</td><td>Last Value</td></tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="w3-row-padding footer">
            <p>Footer</p>
        </div>
  </body>
</html>
James T
  • 795
  • 9
  • 11
  • James T, thanks for the suggestion but it's not quite what I'm after. I want to be able to scroll through the table using the y-scrollbar of the w3-container rather than using the scroll bar of the web browser which your suggestion uses. – David Feb 13 '19 at 14:31
  • @David can you use CSS Grid, like [this](https://stackoverflow.com/q/45799207/7700187)? If not, you can also achieve this with Flexbox. – James T Feb 13 '19 at 15:05
  • @David I've edited my answer, I think this is now what you wanted. – James T Feb 13 '19 at 22:04