Resizing <Table> with CSS. Staying within the wrapper

Having issues with keeping the table as the same size of the wrapper or parent? See code below.

<style>
    /*Center the content*/
    #wrapper {
        margin: 0px auto;
        width: 230px;
        height: 100px;
        background: grey; /*this is only to show how the table is within the wrapper*/
    }
    table {
        table-layout:fixed; /*makes the table to be a specific size*/
        width: inherit; /*need to be include to make the table specific size*/
    }
    input {
        width: 100%;/*size of the input box, keeps the table inside the wrapper*/
    }
    th{
       overflow: hidden; /* hides text overflowing the field*/
    }
</style>     

   
<div id="wrapper">
<table border="1">
    <tr>
        <th id="livesearch">Date</th>
        <th id="livesearch2">First_Name</th>
        <th id="livesearch3">Last_Name</th>
    </tr>
    <tr>
        <!--the onfocus and onblur what makes the <th> resize when selected, this is not necessary to make the table a fixed size-->
        <td ><input onfocus="document.getElementById('livesearch').style.width='100px';" onblur="document.getElementById('livesearch').style.width='auto';"class="date" type="text" /></td>
        <td> <input onfocus="document.getElementById('livesearch2').style.width='100px';" onblur="document.getElementById('livesearch2').style.width='auto';" class="type" type="text" /></td>
        <td> <input onfocus="document.getElementById('livesearch3').style.width='100px';" onblur="document.getElementById('livesearch3').style.width='auto';" class="type" type="text" /></td>
    </tr>
</table>
</div>

Notes: Overflow in table, wrap text in table, table width