# Table display on mobile

**URL:** <https://community.hubspot.com/t/table-display-on-mobile/117075>\
**Category:** CMS Development\
**Tags:** professional\
**Created:** [September 25, 2024, 7:01pm UTC](https://community.hubspot.com/t/table-display-on-mobile/117075 "2024-09-25T19:01:21Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![LLuskin](https://avatars.discourse-cdn.com/v4/letter/l/46a35a/32.png) [@LLuskin](https://community.hubspot.com/u/LLuskin)\
**Post date:** [September 25, 2024, 7:01pm UTC](https://community.hubspot.com/t/table-display-on-mobile/117075/1 "2024-09-25T19:01:21Z")

</div>

I created a table in a rich text module for my homepage. You can see it here: [HR Outsourcing Company | HR Support | myHR Partner (myhrpartnerinc.com)](https://myhrpartnerinc.com/), about halfway down the page. The content does not look good on mobile. The text from the first column overlaps with the text in the 2nd column. Can that be fixed?

---

<div class="post-metadata">

**Author:** ![Teun](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/teun/32/28739_2.png) [@Teun](https://community.hubspot.com/u/Teun)\
**Post date:** [September 25, 2024, 7:17pm UTC](https://community.hubspot.com/t/table-display-on-mobile/117075/2 "2024-09-25T19:17:59Z")

</div>

Hi @LLuskin ,

A quickfix could be to make your table scrollable on mobile.

Try adding the following styling to the table:

```lia-code-sample
min-width: 1000px;
overflow-x: scroll;

```

---

<div class="post-metadata">

**Author:** ![jnix284](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jnix284/32/29_2.png) [@jnix284](https://community.hubspot.com/u/jnix284)\
**Post date:** [September 25, 2024, 7:19pm UTC](https://community.hubspot.com/t/table-display-on-mobile/117075/3 "2024-09-25T19:19:02Z")

</div>

Hi @LLuskin my recommendation would be to hide the table module entirely on mobile and use a different module to display the same content in a more mobile-friendly way. You can use the visibility option to hide the modules on mobile and desktop accordingly.

---

<div class="post-metadata">

**Author:** ![maneksoft](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/maneksoft/32/62993_2.png) [@maneksoft](https://community.hubspot.com/u/maneksoft)\
**Post date:** [December 17, 2024, 7:57am UTC](https://community.hubspot.com/t/table-display-on-mobile/117075/4 "2024-12-17T07:57:22Z")

</div>

I think you can use the following CSS to make your table responsive. This will ensure the table content stacks or becomes scrollable on smaller screens.

css  
Copy code  
table {  
width: 100%;  
border-collapse: collapse;  
}

table th, table td {  
padding: 10px;  
text-align: left;  
}

table th {  
background-color: #f2f2f2;  
}

[@media](https://community.hubspot.com/t5/user/viewprofilepage/user-id/83477) screen and (max-width: 768px) {  
table, thead, tbody, th, td, tr {  
display: block;  
}

thead tr {  
display: none;  
}

tr {  
margin-bottom: 10px;  
}

td {  
display: flex;  
justify-content: space-between;  
align-items: center;  
padding: 10px;  
border-bottom: 1px solid #ddd;  
}

td::before {  
content: attr(data-label);  
font-weight: bold;  
flex-basis: 40%;  
}  
}

Otherwise you need to include data-label attributes in your table cells. also alternative option you can allow horizontal scrolling instead.