div header/table/div footer structure with head fixed?

Question

How can I have a header/content/footer where the content contains or is a table which its thead should be fixed (not scroll) and its tbody should be scrollable?

I've have my header/content/footer structure with flex-boxes thanks to help in this thread http://fiddle.jshell.net/nacho4d/ddv7ytkf/11/ but can't embed a table nicely in it. I was trying this jsfiddle but couldn't adapt it to my case so far.

This is what I have so far, no luck at all :( http://fiddle.jshell.net/nacho4d/ddv7ytkf/17/

<div id="main">
    <div style="background-color:lightblue;" class="header">Header - height is variable but just a couple of lines at maximum. Should not overflow
    </div>

    <div style="background-color:khaki;" class="content">
        <table>
        <thead>
            <tr><td>Name</td><td>phone</td></tr>
        </thead>
        <tbody>
            <tr><td>AAAA</td><td>323232</td></tr>
            <tr><td>BBBBB</td><td>323232</td></tr>
            <tr><td>CCCCC</td><td>3435656</td></tr>
            <tr><td>AAAA</td><td>323232</td></tr>
            <tr><td>BBBBB</td><td>323232</td></tr>
            <tr><td>CCCCC</td><td>3435656</td></tr>
            <tr><td>AAAA</td><td>323232</td></tr>
            <tr><td>BBBBB</td><td>323232</td></tr>
            <tr><td>CCCCC</td><td>3435656</td></tr>
            <tr><td>BBBBB</td><td>323232</td></tr>
            <tr><td>CCCCC</td><td>3435656</td></tr>
            <tr><td>AAAA</td><td>323232</td></tr>
            <tr><td>BBBBB</td><td>323232</td></tr>
            <tr><td>CCCCC</td><td>3435656</td></tr>
            <tr><td>CCCCC</td><td>3435656</td></tr>
            <tr><td>CCCCC</td><td>3435656</td></tr>
            <tr><td>CCCCC</td><td>3435656</td></tr>
            <tr><td>CCCCC</td><td>3435656</td></tr>
            <tr><td>CCCCC</td><td>3435656</td></tr>
            <tr><td>CCCCC</td><td>3435656</td></tr>
        </tbody>
        </table>
    </div>

    <div style="background-color:pink;" class="footer">Footer
    </div>
</div>

And the css:

#main {
    width: 400px;
    height: 250px;
    border: 1px solid #c3c3c3;

    display: flex;
    display: -webkit-flex;

    -webkit-justify-content: space-between;
    justify-content: space-between;

    -webkit-flex-direction: column;
    flex-direction: column;
}
.header,
.footer {
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
}
.content {
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    overflow:auto
}

table ,tr td{
    border:1px solid red
}
tbody {
    display:block;
    /*height:50px;*/
    overflow:auto;
}
thead, tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;
}
thead {
    width: 100%;
}
table {
    width:100%;
}

EDIT Should I change my html?

Answer 1

To start off, you can position your header, content and footer as follows.

HTML

<div id="main">
    <div id="header">
        Header
    </div>
    <div id="content">
    </div>
</div>
<div id="footer">
    Footer
</div>

CSS

html, body {
    height: 100%;
    margin: 0;
}
#main {
    min-height: 100%;
    margin-bottom: -50px;
}
#header {
    height: 50px;
    background-color: gray;
}
#footer {
    height: 50px;
    background-color: gray;
}

Now you can add your table into your content div.

<table id="table">
    <thead>
        <tr>
            <td width="50%">Name</td>
            <td width="50%">Phone</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>AAA</td>
            <td>xxx-xxx-xxxx</td>
        </tr>
        <tr>
            <td>BBB</td>
            <td>xxx-xxx-xxxx</td>
        </tr>
        <tr>
            <td>CCC</td>
            <td>xxx-xxx-xxxx</td>
        </tr>
    </tbody>
</table>

To get your desired scroll bar, you need to align your CSS as follows.

table {
    margin-top: 10px;
    width: 200px;
    border-collapse: collapse;
}
td {
    border: 1px solid black;
}
tbody {
    display: block;
    height: 200px;
    overflow-y: scroll;
    overflow-x: hidden;
}
thead, tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}
thead {
    width: calc(100% - 1em);
    background-color: lightblue;
}

The key points here are:

• Making your tbody display: block, so that you can add the scroll to it. Then adding overflow-y: scroll to make it scroll vertically. You may also add overflow-x: hidden to hide the horizontal scroll.
• Add display: table and table-layout: fixed to your thead and all tr's inside of tbody. This keeps your table functioning as a table with tbody in block.
• Adjust the width on your thead so that it keeps your columns aligned.

Sorry for the long answer, but I wanted to explain everything clearly.

Here is a JSFiddle

Answer 2

I separate in two tables

Maybe this can help you:

http://fiddle.jshell.net/ddv7ytkf/20/

Answer 3

You can encapsulate your table in a section and pad the top and bottom (space for header and footer)

section {
  position: relative;
  padding-top: 37px;
  padding-bottom: 37px;
}

And fix the position (absolute) of the header and footer.

th div{
  position: absolute;
  top: 0;
}
tfoot tr td div {
  position: absolute;
  bottom: 0;
}

Here, check this: https://jsfiddle.net/byB9d/6857/