CODEWITHSUNDEEP
htmlcssresponsive
Kris M
Kris M

Reputation: 81

Why would this html table be responsive on desktop, but not on mobile?

I am trying to build an HTML table that will stack the td's vertically into a card form when viewed on mobile.

The problem is that it does what it's supposed to on the narrow screen of a desktop computer, but not on mobile.

I figured out that the viewport is important but doesn't solve the issue.

Any other suggestions?

I tried several different tutorials and codePens that claim to have the code for a "mobile-friendly cards style responsive table", but they all simply do not work on the real mobile device when tested on iOS 12 Safari or Chrome.

Best case: the table looks strange, worst case: the table remains horizontal.

<style>
body {
  font-family: "Open Sans", sans-serif;
  line-height: 1.25;
}

table {
  border: 0;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
}
table caption {
  text-align: left;
  font-size: 1.3em;
  margin: .5em 0 .75em;
}
table thead {
  display: none;
}
table tr {
  display: block;
  border: 1px solid #eee;
  padding: 1em 1em .5em;
}
table tr + tr {
  margin-top: .625em;
}
table td {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 1px solid #eee;
  font-size: .8em;
  line-height: 1.35em;
}

table td:before {
  content: attr(data-label);
  font-size: .90em;
  text-align: left;
  font-weight: bold;
  text-transform: uppercase;
  max-width: 45%;
  color: #545454;
}
table td + td {
  margin-top: .8em;
}
table td:last-child {
  border-bottom: 0;
}

@media screen and (min-width: 600px) {
  table caption {
    font-size: 1.5em;
  }
  table thead {
    display: table-header-group;
  }
  table tr {
    display: table-row;
    border: 0;
  }
  table th, table td {
    text-align: center;
  }
  table th {
    font-size: .85em;
    text-transform: uppercase;
  }
  table td {
    display: table-cell;
  }
  table td:before {
    display: none;
  }
  table td:last-child {
    border-bottom: 1px solid #eee;
  }
}
</style>
<html>

    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link async href="./style.css" rel="stylesheet" type="text/css" media="screen, projection"/>
    </head>

    <body>
        <table>
         <caption>Documents Details</caption>
         <thead>
          <tr>
           <th scope="col">Cluster</th>
           <th scope="col">Pending Approval</th>
           <th scope="col">Pending Signature</th>
           <th scope="col">Overdue</th>
           <th scope="col">Complete</th>
          </tr>
         </thead>
         <tbody>
          <tr>
           <td data-label="Cluster">Learning Complex 1</td>
           <td data-label="Pending Approval">9</td>
           <td data-label="Pending Signature">33</td>
           <td data-label="Overdue">5</td>
           <td data-label="Complete">55</td>
          </tr>
          <tr>
           <td scope="row" data-label="Cluster">Learning Complex 2</td>
           <td data-label="Pending Approval">21</td>
           <td data-label="Pending Signature">33</td>
           <td data-label="Overdue">2</td>
           <td data-label="Complete">46</td>
          </tr>
          <tr>
           <td scope="row" data-label="Cluster">Learning Complex 3</td>
           <td data-label="Pending Approval">18</td>
           <td data-label="Pending Signature">14</td>
           <td data-label="Overdue">8</td>
           <td data-label="Complete">54</td>
          </tr>
         </tbody>
        </table>  
    </body>

</html>

I expect the table to stack each row vertically into a card when looked on mobile, but it doesn't work. Strangely enough, it does work on a desktop.

Here's a JsFiddle.

What could be the issue?

Upvotes: 1

Views: 2691

Answers (2)

Kris M
Kris M

Reputation: 81

By duplicating the framed and working instance of the code from JsFiddle, I reverse-engineered it by removing things one by one and finally figured out that the whole issue was caused by the fact that <!DOCTYPE HTML> was missing from the top of the HTML document.

Ugh.

Solved.

Upvotes: 2

John
John

Reputation: 3775

This is probably not working due to malformed HTML caused by the <div> immediately after <html> tag. If you look at the DOM tree in inspector the items in <head> end up being inside the <body>. Not able to test this but if you delete this div and the closing div that appears after the </body> then it may solve the problem. Or move those div within the <body> </body>.

I'm going by the link you gave in the comment, the code for that is different to the one above.

Upvotes: 0

Related Questions