CODEWITHSUNDEEP
htmlcsshtml-table
Jon
Jon

Reputation: 3184

Table that Fills 100% Parent Height with Fixed Header/Footer

This question has been asked a million times and been given equally as many different solutions, but I can't seem to find one that pertains to my situation, hence why I'm asking again.

I want to create a table that fills 100% of its parent container, with a locked header and footer. Finding a clean, easy solution would likely result in knighthood, so I know it's not a simple task and it may require Javascript - this is fine.

Here's the layout I have: two fixed left menus, a dynamic width content area with two headers, and a table that fills 100% of the content area with a fixed header and footer.

enter image description here

- - Here's a Fiddle to play with. - -

Relevant HTML:

<div class="page-content" id="grid-container">
    <div class="table-container">
        <table class="table table-striped table-hover">
            <thead>
                <tr>
                    <th>First</th>
                    <th>Last</th>
                    <th>City</th>
                    <th>State</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Jon</td>
                    <td>Smith</td>
                    <td>Indianapolis</td>
                    <td>Indiana</td>
                </tr>
                [...etc...]
            <tfoot>
                <tr>
                    <td>First</td>
                    <td>Last</td>
                    <td>City</td>
                    <td>State</td>
                </tr>
        </table>
    </div>
</div>

Relevant CSS:

.page-content {
    height:100%;
    overflow:hidden;
}

.table-container {
    box-sizing:border-box;
    height:auto;
    border:2px solid green;
    overflow:hidden;    
}
#grid-container table thead {
    position:fixed;
    top:0;
}

#grid-container table thead>tr {
    display:block;
}

#grid-container table tbody {
    display:block;
    overflow:auto;
    height:500px;
}

Question: How can I stick the header and footer to the top and bottom of the content area (and have them move if the browser is resized vertically), and make the tbody scrollable?

Upvotes: 0

Views: 5789

Answers (2)

Deepak Saralaya
Deepak Saralaya

Reputation: 457

.header
{
 position:fixed;
 z-index: 100;
}

.container {
 min-height: 100%;
 position: relative;
}

.footer {
 position: absolute;
 bottom: 0;
}

Upvotes: 0

Jon
Jon

Reputation: 3184

I just ended up using javascript. Here's what I did:

Essentially I calculate the content space for the table (minus header, subheader, and filters), then I stacked three tables on top of one another: one for the header, one for the body, and one for the footer. I set the body height to the content area height that I calculated, minus the header and footer height.

$(function() {
    drawTable();

    $(window).resize(function(e) {
        drawTable();
    });
});

function drawTable() {

    // Heights for calculating content area
    var windowHeight = $(window).outerHeight();
    var toolbars = $("#toolbars").outerHeight();
    var filters = $("#filters").outerHeight();

    // Total height of the table header and footer
    var headerFooter = $("#grid-container thead").outerHeight() + $("#grid-container tfoot").outerHeight();

    // Size the parent containers based on the remaining area
    $(".page-content").height(windowHeight - toolbars);
    $("#grid-container").height(windowHeight - toolbars - filters - headerFooter);  

    // Set cell widths to be the same for the header, content, and footer
    $("#grid-container tbody td, #grid-container tfoot th, #grid-container thead th").width(100/$("#grid-container thead th").size() + "%");
}

Upvotes: 1

Related Questions