I have set up a Bootstrap4 table with multiple columns, but I need one of them to be larger in order to accommodate more text. I want to specify the minimum width for this larger column and let Bootstrap4 adjust the sizes of the other columns accordingly. I have tried various methods but haven't been able to figure out how to set the width of the specific column. Any help or suggestions would be greatly appreciated. Thank you.
For example, let's say that column 11 should be larger than the others.
<script type="text/javascript">
$(document).ready(function() {
$('#mytable').DataTable(
{
"lengthMenu": [ [10, 20, 30, -1], [10, 20, 30, "All"] ]
}
);
} );
</script>
<table id="mytable" class="table table-striped table-hover table-bordered">
<thead>
<tr>
<th>column 1, default size</th>
<th>column 2, default size</th>
<th>column 3, default size</th>
<th>column 4, default size</th>
<th>column 5, default size</th>
<th>column 6, default size</th>
<th>column 7, default size</th>
<th>column 8, default size</th>
<th>column 9, default size</th>
<th>column 10, default size</th>
<th>column 11, 15% size/th>
<th>column 12, default size</th>
<th>column 13, default size</th>
<th>column 14, default size</th>
<th>column 15, default size</th>
<th>column 16, default size</th>
<th>column 17, default size</th>
<th>column 18, default size</th>
</tr>
</thead>
<tbody>
<tr>
<td>column 1, default size</td>
<td>column 2, default size</td>
<td>column 3, default size</td>
<td>column 4, default size</td>
<td>column 5, default size</td>
<td>column 6, default size</td>
<td>column 7, default size</td>
<td>column 8, default size</td>
<td>column 9, default size</td>
<td>column 10, default size</td>
<td>column 11, 15% size</td>
<td>column 12, default size</td>
<td>column 13, default size</td>
<td>column 14, default size</td>
<td>column 15, default size</td>
<td>column 16, default size</td>
<td>column 17, default size</td>
<td>column 18, default size</td>
</tr>
</tbody>
</table>