Responsive tables, works on desktop but not exactly the same on mobile

Question

I was trying out this demo to help optimize some tables on a site I'm developing.

Demo works great on my desktop when I resize with a responsive tester extension for chrome:

When loading on my phone it displays everything inline and if more data is added it just spills out:

Anyone have any idea?

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<style>
  body {
    font-family: "Open Sans", sans-serif;
    line-height: 1.25;
  }
  
  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 {
      /*
        * aria-label has no advantage, it won't be read inside a table
        content: attr(aria-label);
        */
      content: attr(data-label);
      float: left;
      font-weight: bold;
      text-transform: uppercase;
    }
    table td:last-child {
      border-bottom: 0;
    }
  }
</style>
</head>

<body>
  <table>
    <caption>Statement 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">Visa - 3412</td>
        <td data-label="Due Date">04/01/2016</td>
        <td data-label="Amount">$1,190</td>
        <td data-label="Period">03/01/2016 - 03/31/2016</td>
      </tr>
      <tr>
        <td scope="row" data-label="Account">Visa - 6076</td>
        <td data-label="Due Date">03/01/2016</td>
        <td data-label="Amount">$2,443</td>
        <td data-label="Period">02/01/2016 - 02/29/2016</td>
      </tr>
      <tr>
        <td scope="row" data-label="Account">Corporate AMEX</td>
        <td data-label="Due Date">03/01/2016</td>
        <td data-label="Amount">$1,181</td>
        <td data-label="Period">02/01/2016 - 02/29/2016</td>
      </tr>
      <tr>
        <td scope="row" data-label="Acount">Visa - 3412</td>
        <td data-label="Due Date">02/01/2016</td>
        <td data-label="Amount">$842</td>
        <td data-label="Period">01/01/2016 - 01/31/2016</td>
      </tr>
    </tbody>
  </table>
</body>

Checked on my phone and worked as expected. https://ibb.co/ZmjJyL9 — Zsolt Meszaros, Dec 26 '20 at 19:43

score 0 · Accepted Answer · answered Dec 26 '20 at 20:06

Could you please check how https://codepen.io/panchroma/pen/YzGEJPd looks for you?

The only changes I made were adding the doctype and upping the @media breakpoint to 950px

Good luck!

   <!doctype html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title></title>
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
      <style>
        body {
          font-family: "Open Sans", sans-serif;
          line-height: 1.25;
        }

        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: 950px) {
          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 {
            /*
              * aria-label has no advantage, it won't be read inside a table
              content: attr(aria-label);
              */
            content: attr(data-label);
            float: left;
            font-weight: bold;
            text-transform: uppercase;
          }

          table td:last-child {
            border-bottom: 0;
          }
        }
      </style>
    </head>

It was just the doctype, I set the break point back down and everything works, I cant believe I over looked that. — OptikKore, Dec 26 '20 at 20:31

Responsive tables, works on desktop but not exactly the same on mobile

1 Answers1