Trouble formatting table

Question

I am attempting to format a table and , for some reason I cannot figure out, the overflow on the <tbody> does not work properly (at all):

Using the following CSS:

body,
html {
  height: 100%;
  margin: 0;
}

.outside {
  height: 100%;
  display: flex;
  flex-flow: column;
  background-color: pink;
}

.outside .header,
.outside .footer {
  background-color: grey;
  font-size: 18px;
  color: blue;
}
.content{
  flex: 1;
  background-color: violet;
}
.data-grid{  
  table-layout: fixed;  
  border-collapse: collapse;
}
.data-grid thead{
  background-color:lightblue;
}
.data-grid tbody{
  height: 100%;
  overflow-y:scroll;
}

The table body pushed the footer down and does not show a scroll bar.

I have placed my fiddle here. A little insight would be appreciated.

Your question is unclear and your fiddle looks like I would expect (minus the missing quotes on some of your classes). What is your desired outcome? — fischgeek, Jan 17 '20 at 19:40
Yeah, that was pretty rookie. Let's say I change the height of the `outside` div to 300px; The table body should be contained within the outside div and provide a scrollbar. — Elcid_91, Jan 17 '20 at 19:47
That makes more sense. Try `overflow: auto` on your `.outside` class. — fischgeek, Jan 17 '20 at 19:59
overflow doesn't work for tbody elements. See https://stackoverflow.com/a/17380697/3903374 for a possible solution. — Rick Hitchcock, Jan 17 '20 at 20:13
Sounds like you want sticky headers, no? https://css-tricks.com/position-sticky-and-table-headers/ — fischgeek, Jan 17 '20 at 20:13

score 2 · Answer 1 · answered Jan 17 '20 at 20:34

Here ya go, with some cleaned up semantics and simplified used of good 'ol fashioned box model. Have a great weekend!

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
}

.header,
.footer {
  background-color: grey;
  font-size: 18px;
  color: blue;
}

.content {
  background-color: violet;
}

.data-grid {
  max-height: 200px;
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}

.data-grid th:not(:first-child), .data-grid td:not(:first-child) {
  border-left: gray 1px solid;
}

.data-grid thead {
  display: table;
  width: 100%;
  table-layout: fixed;
  background-color: lightblue;
  width: calc(100% - 17px); /* Average scrollbar width to keep columns aligned + border width */
}

.data-grid tbody tr {
  display:table;
  width:100%;
  table-layout:fixed
}

.data-grid tbody {
  display: block;
  height: 200px;
  width: 100%;  
  overflow-y: scroll;
  overflow-x: hidden;
}

<div class="header">Table Header Here</div>
<div class="content">
  <table class="data-grid">
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
    </tbody>
  </table>
</div>
<div class="footer">Table Footer Here</div>

Thanks Chris and everyone else for their responses; however I am not getting my problem across. Chris, your solution works if the `` section is a fixed height but does not work with a height of say 100%; I have [updated my fiddle](https://jsfiddle.net/spsimmons_64/jb9x4z30/16/) to better exemplify my problem. Any help is appreciated. — Elcid_91, Jan 18 '20 at 15:11

score 0 · Answer 2 · answered Jan 17 '20 at 20:23

Move these three styles from your .outside styles to your .data-grid styles:

  height: 200px;
  display: flex;
  flex-flow: column;

Here is the code with just those changes:

body,
html {
  height: 100%;
  margin: 0;
}

.outside {
  background-color: pink;
}

.outside .header,
.outside .footer {
  background-color: grey;
  font-size: 18px;
  color: blue;
}
.content{
  flex: 1;
  background-color: violet;
}
.data-grid{  
  height: 200px;
  display: flex;
  flex-flow: column;
  table-layout: fixed;  
  border-collapse: collapse;
}
.data-grid thead{
  background-color:lightblue;
}
.data-grid tbody{
  height: 100%;
  overflow-y:scroll;
}

<div class="outside">
  <div class="header">Table Header Here</div>
  <div class="content">
    <table class="data-grid">
      <thead>
        <tr>
          <td>Column 1</td>
          <td>Column 2</td>
          <td>Column 3</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class=footer>Table Footer Here</div>
</div>

(Run the above snippet and expand in full page view to eliminate extra scroll bar caused by small stackoverflow window)

This works for adding the scrollbar, but the thead column widths don't match the tbody's. — Rick Hitchcock, Jan 17 '20 at 20:29

Trouble formatting table

2 Answers2