Issue: I am encountering a problem with resizing a table inside a div that contains input elements. When I adjust the browser window size or change to a lower resolution, the div element resizes and scales down, causing a horizontal scroll bar to appear. However, the table overflows its parent div in this situation. To see an example of this issue, please refer to the code snippet and fiddle provided below.
fiddle- http://jsfiddle.net/CrfaE/573
code-
<html>
<body>
<div style="border: 1px solid orange; padding: 1px">
<span>level1</span>
<div style="border: 1px solid blue; padding: 1px">
<span>level2</span>
<div style="border: 1px solid green; padding: 1px">
<span>level3</span>
<table style="border: 1px solid red;">
<tbody>
<tr>
<td>1</td>
<td><input value="2017-01-01"></td>
<td><input value="abc"></td>
<td><input value="3"></td>
<td><select>
<option value="">Select</option>
<option>abc</option>
<option>def</option>
<option>ghi</option>
</select></td>
<td><input value="10"></td>
<td><input value=""></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Required behavior : I would like all parent div elements to resize/expand when the browser's window size is adjusted so that the table does not overflow. The user should be able to see the page using horizontal scroll bars without the table overflowing outside the boundaries of the div/body.