Known Participant

Answered

Mobile Friendly Tables [Locked]

Forum|Forum|6 years ago
March 26, 2019
3 replies
1501 views

Hello,

I have a website with a few tables. The biggest table is 3 columns, of course this does not display correctly on an iPhone, as the table gets cut off and you would have to scroll. Ideally, I would love for the table to appear in mobile with each column beneath the one above. Any other method would do.

My website is www.nobsphones.com. If someone could take a look and help me out. (Keep in mind, I don't know much about bootstrap, java, etc) I am kind of feeling my way through this, but would be very appreciative for some help.

Thank you

This topic has been closed for replies.

Correct answer Paul-M

Here's an example :

<html>
<head>
<style>
table {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
table-layout: fixed;
}
table caption {
font-size: 1.5em;
margin: .5em 0 .75em;
}
table tr {
background-color: #f8f8f8;
border: 1px solid #ddd;
padding: .35em;
}
table th, table td {
padding: .625em;
text-align: center;
}
table th {
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
}
@media screen and (max-width: 600px) {
table {
    border: 0;
}
table caption {
    font-size: 1.3em;
}
table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
table tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
}
table td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
}
table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
}
table td:last-child {
    border-bottom: 0;
}
}
    </style>
</head>
<body>
<table>
<caption>
Accounts Summary
</caption>
<thead>
    <tr>
      <th scope="col">Account</th>
      <th scope="col">Due Date</th>
      <th scope="col">Amount</th>
      <th scope="col">PERIOD</th>
    </tr>
</thead>
<tbody>
    <tr>
      <td data-label="Account">JOE BLOGGS</td>
      <td data-label="Due Date">04/10/2018</td>
      <td data-label="Amount">1,090</td>
      <td data-label="Period">03/08/2018 - 03/09/2018</td>
    </tr>
    <tr>
      <td scope="row" data-label="Account">JOHN SMITH</td>
      <td data-label="Due Date">03/10/2018</td>
      <td data-label="Amount">2,653</td>
      <td data-label="Period">02/08/2018 - 02/09/2018</td>
    </tr>
    <tr>
      <td scope="row" data-label="Account">SARAH JONES</td>
      <td data-label="Due Date">03/10/2018</td>
      <td data-label="Amount">1,171</td>
      <td data-label="Period">02/08/2018 - 02/09/2018</td>
    </tr>
    <tr>
      <td scope="row" data-label="Acount">JIM MCDOWELL</td>
      <td data-label="Due Date">02/10/2018</td>
      <td data-label="Amount">899</td>
      <td data-label="Period">01/08/2018 - 01/09/2018</td>
    </tr>
</tbody>
</table>
</body>
</html>

Nancy OShea

Community Expert

I try to avoid tables if possible. But when you can't, there are Bootstrap responsive tables. Or you can use definition lists to create faux tables. You can see the JS Fiddle below.

https://jsfiddle.net/NancyO/SxGNV/

Nancy O'Shea— Product User & Community Expert

P

Paul-M

Legend

The Bootstrap solution is horrible ... Horizontal scrolling?

The OP indicates they have table markup already hence the solution offered ...

Paul-M - Community Expert

P

Paul-M

Legend

I updated that example a tad so you can copy and paste into a blank document and see how it works firstly, then look at applying similiar to the tables on your site.

If you need more specifics, post back & I'm sure somebody will be able to help you

Paul-M - Community Expert

webmaster698Author

Known Participant

That is a great example, thanks.

What I was thinking, and I don't know if it's possible, was a table where you see three columns next to each other, left to right. But, on mobile those same columns are now stacked, top to bottom. (So everything is on a smaller screen, but there is no need to scroll.

I know that in your example, there is no need to scroll, but it also makes the text small, and even smaller the more content there is.

P

Paul-M

Legend

this bit:

table td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
}

change the font-size as required

Paul-M - Community Expert

P

Paul-MCorrect answer

Legend

Here's an example :

<html>
<head>
<style>
table {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
table-layout: fixed;
}
table caption {
font-size: 1.5em;
margin: .5em 0 .75em;
}
table tr {
background-color: #f8f8f8;
border: 1px solid #ddd;
padding: .35em;
}
table th, table td {
padding: .625em;
text-align: center;
}
table th {
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
}
@media screen and (max-width: 600px) {
table {
    border: 0;
}
table caption {
    font-size: 1.3em;
}
table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
table tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
}
table td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
}
table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
}
table td:last-child {
    border-bottom: 0;
}
}
    </style>
</head>
<body>
<table>
<caption>
Accounts Summary
</caption>
<thead>
    <tr>
      <th scope="col">Account</th>
      <th scope="col">Due Date</th>
      <th scope="col">Amount</th>
      <th scope="col">PERIOD</th>
    </tr>
</thead>
<tbody>
    <tr>
      <td data-label="Account">JOE BLOGGS</td>
      <td data-label="Due Date">04/10/2018</td>
      <td data-label="Amount">1,090</td>
      <td data-label="Period">03/08/2018 - 03/09/2018</td>
    </tr>
    <tr>
      <td scope="row" data-label="Account">JOHN SMITH</td>
      <td data-label="Due Date">03/10/2018</td>
      <td data-label="Amount">2,653</td>
      <td data-label="Period">02/08/2018 - 02/09/2018</td>
    </tr>
    <tr>
      <td scope="row" data-label="Account">SARAH JONES</td>
      <td data-label="Due Date">03/10/2018</td>
      <td data-label="Amount">1,171</td>
      <td data-label="Period">02/08/2018 - 02/09/2018</td>
    </tr>
    <tr>
      <td scope="row" data-label="Acount">JIM MCDOWELL</td>
      <td data-label="Due Date">02/10/2018</td>
      <td data-label="Amount">899</td>
      <td data-label="Period">01/08/2018 - 01/09/2018</td>
    </tr>
</tbody>
</table>
</body>
</html>

Paul-M - Community Expert

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded