CODEWITHSUNDEEP
htmlcsshtml-table
krystah
krystah

Reputation: 3733

Table: Scrollable tbody, fixed tfoot

I am trying to create a tfoot element in my table structure which I want to stay fixed at the bottom, while the tbody remains scrollable. I have read various related questions and answers, and most seem to utilize nested tables.

While one might argue that "whatever works is whatever you should use", using nested tables feels (might be just me) like a dead wrong approach and against the little I have learned about markup. Are there not any more "sane" solutions to use-cases such as this?

Upvotes: 1

Views: 1620

Answers (1)

igorpavlov
igorpavlov

Reputation: 3626

Try one of these pieces of code according to your needs.

If you need a webpage with footer always on bottom:

<body>
    <div style="padding-bottom:60px;">
        <!--main content here-->
    </div>
    <div style="position:fixed;width:100%;height:60px;left:0;bottom:0;">
        <!--footer content here-->
    </div>
</body>

If you need a custom block somewhere:

<div style="position:relative;width:600px;height:400px">
    <div style="padding-bottom:60px;">
        <!--main content here-->
    </div>
    <div style="position:absolute;width:100%;height:60px;left:0;bottom:0;">
        <!--footer content here-->
    </div>
</div>

Footer height in example is 60px - it can be anything actually. Use CSS file for styles (I wrote inline for better explanation).

Also I do not recommend to use nested tables. Yes, you can use a sledge hammer as a nutcracker, but it would not be effective.

Upvotes: 1

Related Questions