Dropdown list inside the HTML header table
My query was addressed in the link above, however, the solution only seemed to work on Chrome and not Firefox. I specifically want the dropdown arrow header to be displayed next to the table header instead of below it and at full width.
.drop-down {
border: none;
margin: 0;
width: 10px;
}<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--JS files-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="row-fluid top-space-20">
<table class="table table-striped">
<thead>
<tr>
<th>Student ID</th>
<th>Student Name</th>
<th>Student Email</th>
<th>Department</th>
<th>Grade
<select class=".drop-down form-control" id="statusFilter">
<option value="">Student grade</option>
<option value="Grade A">A</option>
<option value="Grade B">B</option>
<option value="Grade C">C</option>
<option value="Grade D">D</option>
<option value="Grade E">E</option>
<option value="Grade F">F</option>
<option value="Grade G">G</option>
</select>
</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>I've tried adjusting the width and using display:inline, but nothing seems to have worked so far. My goal is to have the dropdown visible only with an arrowhead next to the Grade header, not below it.