Bootstrap4: Table using the whole width but still using table-responsive - css

Question

Would it be possible to use table-responsive that only use the minimal column width based on the length of the data in the column, and also having the thead using all the canvas width.
Example: (the last column that has no content would use the remaining space on the right)

Answer 1

If you add a table-responsive class to your table, it will occupy 100% of it's parent's width and will space the columns equally... this is shown in the top table in the code snippet below
But we can do what you're looking for:
want all the columns to use minimal width
last empty column to occupy the remaining width.
check the bottom table in the code snippet below
th {
background: lightgray
}
.myTableOne td {
white-space: nowrap
}
.myTableOne th:last-of-type {
width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container-fluid">
<h4>Table with table-responsive class</h4> <br/>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
<hr/>
<h4>Table for your requirements </h4>
<br/>
<div class="myTableOne">
<table class=" table-bordered">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td></td>
</tr>
</tbody>
</table>
</div>