Responsive table

SOLVE
Regular Contributor

Hi Everybody 

 

I'm having problems with structure of a table for the mobile version, I show below visibility on desktop: UltimaTabla_LP-Poliza2019_Escritorio.PNG

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:

 

UltimaTabla_LP-Poliza2019_Movil.PNG

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:

 

UltimaTabla_LP-Poliza2019_Movil_EjemploVisualización.PNG

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.

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Regular Advisor

I 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:

 

before-element.png

 

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

Website | Contact

 

If this helped, please mark it as the solution to your question, thanks!

Reply
0 Upvotes
2 Replies
Regular Advisor

I 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:

 

before-element.png

 

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

Website | Contact

 

If this helped, please mark it as the solution to your question, thanks!

Reply
0 Upvotes
Regular Contributor

Hi @Stephanie-OG 

 

Thanks very much for the information my tables is ok. Smiley Happy

 

Thanks and Regards!!

Reply
0 Upvotes