I've been utilizing the Bootstrap tables from the Fluent Kit framework, but I've noticed that on smaller screens, the text in the cells wraps to a new line instead of expanding to fit the available width, even though it's inside the .table-responsive wrapper.
Below, you can see an example of this behavior in the fifth "Engine" column:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/gh/nespero/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d1b7bda4b4bfa5fcbab8a591e0ffe3ffe1">[email protected]</a>/css/fluent-kit.min.css" rel="stylesheet"/>
<table class="table table-responsive">
<caption>Last week statistics</caption>
<thead>
<tr>
<th>Make</th>
<th>Model</th>
<th>Origin</th>
<th>Producer</th>
<th>Doors</th>
<th>Engine</th>
<th>Petrol</th>
<th>First release</th>
<th>Price in 2016</th>
<th>Price in 2017</th>
<th>Max speed</th>
<th>Gears</th>
<th>Manufactured</th>
</tr>
</thead>
<tbody>
<tr>
<td>Audi</td>
<td>R8</td>
<td>Germany</td>
<td>Audi</td>
<td>3</td>
<td>R8 V8 4.2 FSI quattro</td>
<td>Gasoline</td>
<td>2006</td>
<td>$1,000,000</td>
<td>$950,000</td>
<td>375 km/h</td>
<td>7</td>
<td>Germany</td>
</tr>
<tr>
<td>Audi</td>
<td>R8</td>
<td>Germany</td>
<td>Audi</td>
<td>3</td>
<td>R8 V8 4.2 FSI quattro</td>
<td>Gasoline</td>
<td>2006</td>
<td>$1,000,000</td>
<td>$950,000</td>
<td>375 km/h</td>
<td>7</td>
<td>Germany</td>
</tr>
<tr>
<td>Audi</td>
<td>R8</td>
<td>Germany</td>
<td>Audi</td>
<td>3</td>
<td>R8 V8 4.2 FSI quattro</td>
<td>Gasoline</td>
<td>2006</td>
<td>$1,000,000</td>
<td>$950,000</td>
<td>375 km/h</td>
<td>7</td>
<td>Germany</td>
</tr>
</tbody>
</table>This layout issue is evident, as shown here: