I am completely new to bootstrap and am in the process of enhancing an existing MVC web application that is already utilizing bootstrap 4. My goal is to incorporate a table with form fields, but I am facing difficulties in controlling the column widths of the table. Particularly, one of the drop down lists has lengthy options, and I would like to limit the size of that column and manage text overflow/wrapping within the drop down list. However, I am finding it challenging to even size an empty table properly. The structure of the page includes a dummy table that mirrors the layout of the actual one.
<div class="form-horizontal col-10 offset-1">
<div class="row">
<h5 class="mt-n1 pl-1">Section title</h5>
</div>
<div class="row" style="background-color:#e8eef4; border: 1px solid #d2d2d2; border-radius: 3px; padding-top: 4px;">
<table class="table table-borderless table-condensed">
<thead>
<tr>
<th class="col-3">Column 1</th>
<th class="col-6">Column 2</th>
<th class="col-3">Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select class="form-control">
<option>Select...</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
</td>
<td>
<select class="form-control">
<option>Select...</option>
<option>An example of the really long text for the select option that will need to overflow.</option>
<option>Another example of the really long text for the select option that will need to overflow.</option>
</select>
</td>
<td>
<textarea class="form-control" cols=20 rows=2></textarea>
</td>
</tr>
</tbody>
</table>
</div>
</div>My attempts to control the column widths have not yielded the desired results. I have come across suggestions to include the container class in one of the divs for better control over column sizes, but I'm unsure of which div to apply it to. Additionally, I have read about using the table-responsive class, although I would prefer to avoid a scrollable table. Any guidance or assistance you can provide on this matter would be highly appreciated.