>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

Leave a Reply