Alexey

/* This is what we are focused on */
.table{
    overflow-y: scroll;
    height: 300px;
}

.table th{
    position: sticky;
    top: 0;
}

table{
    border-collapse: collapse;
    width: 100%;
}

Футер состоит из двух частей фиксированной ширины 350 + 200 пикселей. В итоге 550. При меньшем разрешении правому некуда деваться.
1) Плохое решение:
.copyrights = 60%
.contacts = 30% (margins, etc.)

2) Решение по-лучше:

@media screen and (max-width: 550px) {
    .copyrights {
        width: 100%;
    }

    .contacts {
        width: 100%;
    }
}

Примитивненько, но на скорую руку
Flexbox или с помощью bootstrap по качественней будет