Table display on mobile

Developer Support CMS Development
1

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), 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?

2

Hi @LLuskin ,

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

Try adding the following styling to the table:

min-width: 1000px;
overflow-x: scroll;
3

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.

4

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 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.