I am facing an issue with an input group placed in a table cell where the button wraps below a certain size. I want to prevent this behavior specifically for this table cell and the rest of the column. The relevant html generated with added javascript elements is as follows:
<div id="inspireRecords" class="table-responsive">
<table class="table table-sm" id="inspireTable"><thead><tr>
<th>Title
<i onclick="sort_table("#inspireTable&",0)" class="fas fa-sort" aria-hidden="true"></i>
</th>
.
.
.
<th>Projects</th></tr></thead><tbody><tr>
<td data-sort="n-flation" class="title">N-flation</td>
.
.
.
<td>
<div class="input-group p-0">
<select class="form-select projectSelect"
<option value="0" selected="">Choose...</option>
<option value="1">Test</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>
<button class="btn btn-primary projectSelectBtn" type="button">Add</button>
</div>
</td></tr></tbody>
</table></div>
I have written custom CSS to address this issue:
th {
white-space: nowrap;
}
div {
padding: 0.5rem 0;
}
Here is the current appearance:
https://i.sstatic.net/eSOv0.png
And here is how I want it to look, even if it requires scrolling:
https://i.sstatic.net/ABgCR.png
I am open to other suggestions as well since I am still learning.