Mixing bootstrap with a non-responsive div contents?

Question

My boss has asked me to update a portion of our website using bootstrap, but only the header. I am using a static navbar for our header, and the rest of the page is a mess of table soup (I think the site was written 10 years ago). The way the code is structured right now is like this:

<div class="container">
    < code for the navbar ></code for the navbar>
    <Table>
         <content of website>
    </Table>
</div>

It looks great on desktop but on mobile it falls apart and zooms into the top left corner of the website. You cannot see all of the header or about 65% of the webpage. I am using:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Rewriting the page in bootstrap is not an option, as we will re-use this header across at least 165 different html files. So I guess what I am asking is it possible to take a non-responsive part of a webpage, slap it into a responsive element so it zooms-out the contents based on screen size?

Cheers!

Answer 1

Your route of least resistance will be to wrap the table in <div class="table-responsive"></div> , like:

<div class="container">
    < code for the navbar ></code for the navbar>
    <div class="table-responsive">
        <table>
            <content of website>
        </table>
    </div>
</div>

This will make the table scroll on mobile. See the docs here

Answer 2

Are your body and html both width: 100% and height: 100% ? Just to make sure.