Responsive CSS table - html

Question

I created a table width 4 images which are placed in a row and four columns (1x4).
<table class="insrtTable">
<tr>
<td><img src=Guitarra.png></td>
<td><img src=Bajo.png></td>
<td><img src=Teclado.png></td>
<td><img src=Ukelete.png></td>
</tr>
</table>
My problem is that I need to see the images in my cellphone in two rows and two columns(2x2).(like this)
<table class="insrtTable">
<tr>
<td><img src=Guitarra.png></td>
<td><img src=Bajo.png></td>
</tr>
<tr>
<td><img src=Teclado.png></td>
<td><img src=Ukelete.png></td>
</tr>
</table>
How can I do that? I see a lot of responsible tables that transform 1 column and 4 rows into 4 columns and 1 row but I can't find one that works for me.

Answer 1

Try using a grid system like Flexbox or Bootstrap grid system. You can make your own grid system as well, but you will be just reinventing the wheel.
Responsiveness is also tied with how you mark your CSS properties, a simple example:-
<div class="container">
Text content </div>
.container {
width:3px; <!-- vs width:3%; --> }
Using % values instead of pixel hardcoded values, can make a difference in your website responsiveness.
A useful source for developing your own grid system- https://zellwk.com/blog/responsive-grid-system/

Answer 2

To answer the actual question, yes you can make somewhat responsive tables, but that would involve unnecessary hacking since tables where never meant to be responsive back in the 70's when they were created. And you'd probably run out of options when trying to do more advanced stuff with them.
A modern approach to layouts in CSS is using something like flexbox. You could solve the problem like this:
<div class="container">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
</div>
.container {
display: flex;
flex-wrap: wrap;
}
.container > .col {
background: tomato;
padding: 16px;
border: 5px solid black;
width: 50%;
}
#media (min-width: 599px) {
.container > .col {
width: 25% !important;
}
}
See it in action here: https://codepen.io/nicooga/pen/MEwZgZ. The key is flex-wrap: wrap, which allows elements overflowing into the next row if they exceed the container's size.
All you need to know about flexbox is here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/.
It seems there's a brand new grid system in native css that seems to do all that was great about flexbox and more: https://css-tricks.com/snippets/css/complete-guide-grid/.

Answer 3

The word you're looking for is "responsive", not "responsible."
How can i do that? i see a lot of responsible tables that transform 1 column and 4 rows into 4 columns and 1 row but i cant find one that works for me.
Most use Bootstrap columns to achieve this.

Answer 4

You can try this simple solution.
First, add a td placeholder where you want to break row (td with class resp)
<table class="insrtTable">
<tr>
<td><img src="img1.png"></td>
<td><img src="img2.png"></td>
<td class="resp"></td>
<td class=""><img src="img3.png"></td>
<td class=""><img src="img4.png"></td>
</tr>
</table>
then you apply the following styles to the table:
#media only screen and (max-width: 767px), (min-device-width: 768px) and (max-device-width: 1024px) {
thead, tbody, th, td.resp, tr {
display: block;
}
}
When you reduce the size of browser window under 768px it'll break 2 images on the first row and 2 on the second row.
You can apply this methodology either to more than 4 columns, setting placeholder where you need.

Answer 5

Responsive design cannot be made with tables. Use other ways. I suggest flex-container or float and clear.
This website is for flex containers.