Footer comes up in smaller screens

I've a html page wherein I display a table with data from the database along with a footer at the bottom of the page.

The problem is that with smaller screens (around less than 760px) the footer, instead of being at the bottom, goes upwards and thus overlaps and hides a portion of the display data.

I want that irrespective of the screen size, the footer should always be placed at the bottom of the page.

My code snippets are mentioned below. Request you to please provide a solution.

Edit 1: A (static) scenario is available at the codepen url (please check out for smaller screen sizes): http://codepen.io/abbor123/pen/YGwVXg

The footer element:

<div class="footer">
    <div class="container">
        <p>Designed & Created by AB </p>
        <p><i class="fa fa-lg fa-creative-commons" aria-hidden="true"></i> Some Rights Reserved </p>
    </div>
</div>

CSS:

.footer
{
    clear: both;
    position: relative;
    z-index: 10;
    height: 8em;
    margin-top: -5em;
    padding-top: 2.5em;
    background: #009933;
    text-align: center;
}

body
{
    background:url(image.png) no-repeat center center fixed;
    background-size: cover; 
    font-family: 'Exo 2', sans-serif;
    color: black;
}

@media (max-width: 770px)
{
    #table-display
    {
        font-family: 'Exo 2', serif;
        text-shadow: 4px 4px 4px #aaa;
        text-align: left;
        color: black;
        margin-top: 60px;
        border-collapse: collapse;
        width: 100%;
    }
}

Solution

To fix the footer problem, remove the height: 60em; from the .row class. It's at line 68 in the CSS for CodePen. http://codepen.io/FluidOfInsanity/pen/gwvZLN?editors=1100 Also, would you want to remove the top: 6px; from the td:before? Maybe your example is just a quick mock-up, but it throws off my example.