1

I am trying to style a table (output by code I can't alter) so that the head and foot of the table are always visible and the contents of the data rows will be scrollable.

What is easiest way to do this?

I tried to set the body to the height minus the header + footer but it didn't work.

Here is my code:

.outer, html, body {
  height: 100%;
}

table {
  border: 1px solid #000;
  width: 100%;
  height: calc(100% - 20px);
  text-align: center;
}
table thead {
  height: 100px;
  background-color: blue;
}
table tbody {
  overflow: scroll;
  height: calc(100% - 200px);
}
table tfoot {
  height: 100px;
  background-color: red;
}
<div class="outer">
  <table>
    <thead><tr>
      <th>col 1</th>
      <th>col 2</th>
      </tr></thead>
    <tbody>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      
    </tbody>
    <tfoot>
      <tr >
        <td colspan=2>footer</td>
      </tr>
    </tfoot>
  </table>
</div>

How do I make table 100% height and the body part stretch to available size and be scrollable?

Guerrilla
  • 13,375
  • 31
  • 109
  • 210
  • Possible duplicate of [Fixed header, footer with scrollable content](https://stackoverflow.com/questions/4069734/fixed-header-footer-with-scrollable-content) – Vucko Jul 10 '18 at 07:05
  • Possible duplicate of [HTML table with fixed header and footer and scrollable body without fixed widths](https://stackoverflow.com/questions/37272331/html-table-with-fixed-header-and-footer-and-scrollable-body-without-fixed-widths) – Chris Spittles Jul 10 '18 at 07:05

2 Answers2

0

Using only CSS you could convert the table into a grid. This gives you huge flexibility.

(View demo full screen)

.outer, html, body {
  height: 100%;
}

table {
  border: 1px solid #000;
  text-align: center;
  display:grid;
  height:100%;
}
table thead {
  height: 40px;
  background-color: blue;
}
table tbody {
  overflow-y: auto;
}
table tfoot {
  height: 40px;
  background-color: red;
}
<div class="outer">
  <table>
    <thead><tr>
      <th>col 1</th>
      <th>col 2</th>
      </tr></thead>
    <tbody>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      
    </tbody>
    <tfoot>
      <tr >
        <td colspan=2>footer</td>
      </tr>
    </tfoot>
  </table>
</div>
DreamTeK
  • 32,537
  • 27
  • 112
  • 171
0

Hi here is example of what you want

link

(function() {
 var fauxTable = document.getElementById("faux-table");
 var mainTable = document.getElementById("main-table");
 var clonedElement = mainTable.cloneNode(true);
 var clonedElement2 = mainTable.cloneNode(true);
 clonedElement.id = "";
 clonedElement2.id = "";
 fauxTable.appendChild(clonedElement);
 fauxTable.appendChild(clonedElement2);
})();

The table is cloned twice and absolutely placed on top of the table. The first clone has the body and footer hidden and the second clone has the header and body hidden. The tables are placed at top:0 and bottom:0 respectively.

To avoid the issue with scrollbars eating up space the absolutely placed tables are positioned within a holding div that already has scrollbars and thus will account for the different scrollbar widths of browsers, or indeed if scrollbars are only overlaid when needed as in Mac systems.

Dmytro Lishtvan
  • 788
  • 7
  • 12