Q:

Shrink table when decreasing window size to prevent scrollbars

I have an HTML that has a navigation bar on top, a div with some wells and then another div which is the "main page" div.
So the main page div has a table in it with several columns. This table is a form and almost all are inputs. I have tried to add one more column there and the page gives me an overflow to the right.
I want to prevent it and make the table to be able to shrink based on the screen. I have this problem on a 15'' screen. Though on a 32'' screen there is no problem and everything is ok.
My CSS code for the table and the HTML is and from what I see the inputs on the table should be able to shrink base on the default values that they get:
html, body {
    height: 100%;
    margin: 0;
}

#mileCtlTable{
    position: relative;
    vertical-align: middle;
    text-align: center;
    border-collapse: collapse;
    margin:auto;
    border: 3px solid black;
    //white-space: nowrap;
    width: 100%;
}

#mileCtlTable thead td{
    border: 1px solid black;
    font-style:oblique;
    text-align:center;
    //white-space: nowrap;
    margin:0vw;
    background-color: navy;
    color:white;
}

#mileCtlTable tbody td{
    border: 1px solid black;
    //width:auto;
    white-space: nowrap;
    text-align: center;
}

#mileCtlTable td,#mileCtlTable th{
    padding: 0.2vw 0.5vw;
}

#mileCtlTable input{
    text-align: center;
    //white-space: nowrap;
    padding: 0.2vw 0.5vw;
}

A:

I have added 
input{width: 100%;} 

