My code snippet showcases an issue where the input box is not fitting properly inside the table. Running the snippet will provide a clearer understanding. I am attempting to make the input box take up the entire space of the td element within the table. How can this be achieved?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.jquery.min.js"></script>
<link href="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.min.css" rel="stylesheet"/>
<title>How to properly fit input box inside td tag within a table?</title>
</head>
<body>
<div class="table-responsive">
<h3 class="text-center">Experience/Skills *</h3>
<table class="table table-hover table-bordered" id="employeeStatusTable">
<thead>
<tr>
<th style="max-width: 10%">#</th>
<th style="max-width: 30%">Technology Category</th>
<th style="max-width: 60%">Names</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Category 1</td>
<td>
<select data-placeholder="Begin typing a name to filter..." multiple name="select1" class="chosen-select" >
<option value=""></option>
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
<option>Option4</option>
<option>Option5</option>
</select>
</td>
</tr>
<tr>
<td>2</td>
<td>Category 2</td>
<td>
<select data-placeholder="Begin typing a name to filter..." multiple name="select2" class="chosen-select" >
<option value=""></option>
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
<option>Option4</option>
<option>Option5</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script>
$(".chosen-select").chosen({
no_results_text: "Oops, nothing found!"
})
</script>
</body>
</html>Bootstrap 5 and jQuery 2 are utilized in this scenario. How can the input box be properly embedded inside the table, as intended?