I'm encountering an issue with a custom select list within a table. The absolute position of the select list is not working properly within the table, causing it to fill the height of the table. My desired outcome is for the select list to overlay the table without affecting its height.
Table code :
<div class="container">
<div class="row">
<div class="main">
<table class="table table-striped mytable">
<thead class="bg-gradient-pink">
<tr>
<th>title1</th>
<th>title2</th>
<th>title3</th>
<th>title4</th>
</tr>
</thead>
<tbody>
[Table content here]
<td>1</td>
<td>2</td>
<td>3</td>
<td>
<select>
<option>option1</option>
<option>option2</option>
<option>option3</option>
<option>option4</option>
</select>
</td>
</tr>
[More rows...]
</tbody>
</table>
</div>
</div>
JS Code :
[JS code provided]
live version : jsfiddle
(In the last row can see some gap added for select list )