I am currently utilizing bootstrap 5 for my project.
Within a table, I am attempting to showcase four images side by side. This setup functions properly on a larger screen: https://i.sstatic.net/7qwW8.png
However, the issue arises when viewing the table on a mobile phone as the images become shrunken and are not visible: https://i.sstatic.net/aQJpi.png
How can I ensure that the images maintain a minimum size of at least 16px even on smaller phone screens? Horizontal scrolling within the table is acceptable.
Is there an alternative method to display four img tags in one td cell and guarantee that they all stay on the same line? The approach I found utilizes row and col divs.
Code:
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead>
<tr>
<th scope="col">Username</th>
<th scope="col">Match Predictions Made</th>
<th scope="col">Winner</th>
<th scope="col">Finals</th>
<th scope="col">Top 4</th>
<th scope="col">Points</th>
</tr>
</thead>
<tbody>
// More code here
</tbody>
</table>
</div>
EDIT
Based on John's suggestion below, I attempted to use nowrap instead of row-col but it ended up pushing everything onto separate lines.
Revised Code:
<td>
<div class="no-wrap">
<img src="assets/flags/be.svg" class="flag-img" alt="be">
<img src="assets/flags/dk.svg" class="flag-img" alt="dk">
<img src="assets/flags/fi.svg" class="flag-img" alt="fi">
<img src="assets/flags/ru.svg" class="flag-img" alt="ru">
</div>
</td>
CSS Styles:
.flag-img {
max-height: 32px;
min-height: 16px;
min-width: 16px;
}
.no-wrap {
flex-wrap: nowrap !important;
}
View the outcome in this image: https://i.sstatic.net/GpnB0.png