Table alignment according to div size - css

Question

I have table inside div , thing is if I change window size, table is coming out of div. please help me. Thanks in advance. Below is my code
<div style="height:auto">
<table width="100%" style="width: 100%;">
<thead>
<tr >
<th width="16.5%">sunday</th>
<th width="16.5%">monday</th>
<th width="16.5%">tuesday</th>
<th width="16.5%">wed</th>
<th width="16.5%">thu</th>
<th width="16.5%">fri</th>
</tr>
</thead>
<tbody>
<tr >
<td>111</td>
<td ><input value="" type="" name="" /></td>
<td ><input value="" type="" name="" /></td>
<td ><input value="" type="" name="" /></td>
<td ><input value="" type="" name="" /></td>
<td ><input value="" type="" name="" /></td>
</tr>
</tbody>
</table>
</div>

Answer 1

Add following css in you code
div{
width: 500px; /* you can apply any width to this div */
}
table{
table-layout:fixed;
border-spacing: 0;
border-collapse: separate;
}
table td{
padding: 5px;
}
input{
width: 100%;
box-sizing: border-box;
}
Check this Demo

Answer 2

Add this in CSS:
td input {
width: 90%;
margin: 0 auto;
}

Answer 3

You have to specify the text field size as a percentage
remove table header fixed width.
CSS
input{width:100%;}
HTML
<div style="background-color:#ccc;padding:5px">
<table >
<thead>
<tr >
<th >sunday</th>
<th >monday</th>
<th >tuesday</th>
<th >wed</th>
<th >thu</th>
<th>fri</th>
</tr>
</thead>
<tbody>
<tr>
<td>111</td>
<td ><input value="" type="text" name="" /></td>
<td ><input value="" type="text" name="" /></td>
<td ><input value="" type="text" name="" /></td>
<td ><input value="" type="text" name="" /></td>
<td ><input value="" type="text" name="" /></td>
</tr>
</tbody>
</table>
</div>
Working fiddle http://jsfiddle.net/G5y3T/1/

Answer 4

You should set your div style to display:inline-block;
Here you can see a demo
You should also use an extern css file rather then inline style. Much efficienter when you change something.

Answer 5

If you want the div to contain the table,you can use overflow: auto. This makes the div scrollable.
But if you don't want it to be scrollable, use display: table instead.