I have a blogger website, and there is an HTML table on it (Homepage).
In mobile view, I want to see that table like the image attached below. Please tell me how to do it (final output). I’m not fluent in CSS.
HTML:
<table border="1" cellspacing="1" style="width: 100%px;">
<tbody>
<tr>
<td>
<a href="" target="_blank">
<img alt="" border="0" src="https://hiru.lk/8Ds0Tf" title="" /></a>
</td>
<td>
<a href="" target="_blank">
<img alt="" border="0" src="https://hiru.lk/8Ds0Tf" title="" /></a>
</td>
<td>
<a href="" target="_blank">
<img alt="" border="0" src="https://hiru.lk/8Ds0Tf" title="" /></a>
</td>
</tr>
</tbody>
</table>
2
Answers
Here, using
CSS-grids
would be a great idea.Check this example:
on smaller screens (max-width: 600px), the table is displayed as a flex container with the direction set to column, which makes the table rows stack vertically. Each table row () is also displayed as a flex container with the direction set to column, which makes the table cells () stack vertically within each row.