I encountered an issue starting yesterday.
I am utilizing Bootstrap 4 and tables. Whenever I set a width greater than 13.5vw, the table does not adjust accordingly. You can view the fiddle here
Below is the code snippet:
HTML
<table class="table table-striped datas-table table-sm rounded">
<thead>
<tr>
<th scope="col">Date of Visit</th>
<th scope="col">Duration</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data</td>
<td>Data</td>
</tr>
...
</tbody>
</table>
Followed by the CSS:
CSS
.datas-table {
overflow: auto;
display: block;
border-radius: 5px;
...
}
.datas-table > tbody > tr > td:nth-child(2), .datas-table > thead > tr > th:nth-child(2) {text-align: right; padding-right: 1.1458333333333335vw;}
...
In the provided Fiddle link, it's evident that the table does not adjust as expected. The use of display: block is necessary for overflow: auto to function properly, enabling scrolling and enforcing the correct width.
Sincerely,