Responsive table
SOLVEHi Everybody
I'm having problems with structure of a table for the mobile version, I show below visibility on desktop:
And due to the added styles for the version of other tables that are found in this same landing, said table is displayed in the following way:
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:
I pass the link to the landing page, where these tables are:
https://www.inbest.cloud/poliza-inbest2019
Could you help me with this please?
Iremin to your comments.....
Thanks and Regards.
1 Accepted solution
Responsive table
SOLVEI think there are two issues here that I'll address separately:
- The additional content being added
- Table responsiveness
The additional content being added
The additional content is being added using :before selectors:
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).
I hope that helps!
Stephanie O'Gay Garcia
HubSpot Design / Development
If this helped, please mark it as the solution to your question, thanks!
Responsive table
SOLVEI think there are two issues here that I'll address separately:
- The additional content being added
- Table responsiveness
The additional content being added
The additional content is being added using :before selectors:
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).
I hope that helps!
Stephanie O'Gay Garcia
HubSpot Design / Development
If this helped, please mark it as the solution to your question, thanks!
