# Responsive table

**URL:** <https://community.hubspot.com/t/responsive-table/13680>\
**Category:** CMS Development\
**Created:** [March 26, 2019, 4:18am UTC](https://community.hubspot.com/t/responsive-table/13680 "2019-03-26T04:18:37Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Janette](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/janette/32/2490_2.png) [@Janette](https://community.hubspot.com/u/Janette)\
**Post date:** [March 26, 2019, 4:18am UTC](https://community.hubspot.com/t/responsive-table/13680/1 "2019-03-26T04:18:37Z")

</div>

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](https://d2qpr2jzcazej7.cloudfront.net/original/3X/f/2/f2b3c36fbb8af16d24b5cf614711bc0882def10b.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](https://d2qpr2jzcazej7.cloudfront.net/original/2X/a/ac44f7a2caefc4e7cb67101d4eaab9f2d490a52f.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](https://d2qpr2jzcazej7.cloudfront.net/original/2X/0/00047709c5ab7c194be3f70362946c3e501ec2ac.png)

I pass the link to the landing page, where these tables are:

> **[iNBest | Forward Deployed AI, Cloud, Security](https://www.inbest.cloud/)**
>
> iNBest deploys AI, cloud, and security systems with GuidancePlex, partner platforms, managed operations, and products like Obok.

Could you help me with this please?

Iremin to your comments…

Thanks and Regards.

---

<div class="post-metadata">

**Author:** ![Stephanie-OG](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/stephanie-og/32/73267_2.png) [@Stephanie-OG](https://community.hubspot.com/u/Stephanie-OG)\
**Post date:** [March 26, 2019, 12:17pm UTC](https://community.hubspot.com/t/responsive-table/13680/2 "2019-03-26T12:17:44Z")

</div>

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](https://www.w3schools.com/cssref/sel_before.asp) selectors:

 ![before-element.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/b/e/be7c8aaa78dc9196b4dc4ecaf16b2047623aa9a4.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:

```auto
@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](https://css-tricks.com/accessible-simple-responsive-tables/#article-header-id-2) 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](https://codepen.io/team/css-tricks/pen/wXgJww) 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](http://www.stephanieogaygarcia.com?utm_source=HubSpotCommunity) | [Contact](http://www.stephanieogaygarcia.com/contact?utm_source=HubSpotCommunity)

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

---

<div class="post-metadata">

**Author:** ![Janette](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/janette/32/2490_2.png) [@Janette](https://community.hubspot.com/u/Janette)\
**Post date:** [March 26, 2019, 6:05pm UTC](https://community.hubspot.com/t/responsive-table/13680/3 "2019-03-26T18:05:14Z")

</div>

Hi @Stephanie-OG

Thanks very much for the information my tables is ok. 🙂

Thanks and Regards!!