What is marked in red is what should not go. But due to the styles of the other tables I do not know how to manipulate them so that this last table looks properly in mobile.
I enclose an example of the visualization of a table of how it should be seen:
Because they apply to all td elements, any table on the page will be affected. What you could do so that it only affects the top table is to give that table an ID and update the :before selectors to only target that table. For example, if it’s #my-table the above might be:
@media only screen and (max-width: 760px), (max-device-width: 1024px) and (min-device-width: 768px) {
#my-table td:nth-of-type(1)::before {
content: "SERVICIOS MANEJADOS DE ACUERDO CON EL TIPO DE PÓLIZA CONTRATADA";
}
}
Table responsiveness
This graphic shows you the options you have for stacking tables on mobile, in your case the rows are being collapesed.
The problem with your mockup image is that the header of the table (Nombre, Horario de Atención… etc.) only appears once so, when you stack up the table, you can’t really make it appear multiple times for each one of the rows.
However, you could use a similar trick to the above and use :before selectors to make this happen. This Codepen has a good example on how to do this (also from CSS Tricks).
