CODEWITHSUNDEEP
javascripthtmlcss
lross12
lross12

Reputation: 73

Adjust the layout of table when in mobile view

For my site I have a table which I've done here: https://jsfiddle.net/stw4jyq8/

table {
  width: 600px;
}

th,
td {
  padding: 7px 10px 10px 10px;
}

th {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 90%;
  bottom-border: 2px solid #111111;
  border-top: 1px solid #999;
  text-align: left;
}

tr.even {
  background-color: #efefef;
}

tr:hover {
  background-color: #c3e6e5;
}
<table width="50%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <th></th>
    <th>Per 4 Pack(200G)</th>
    <th>Per 100g</th>
    <th>Per Buttery(50G)</th>
  </tr>

  <tr>
    <th>Calories</th>
    <td>724</td>
    <td>362</td>
    <td>181</td>
  </tr>

  <tr class="even">
    <th>Fat</th>
    <td>43.1g</td>
    <td>21.6g</td>
    <td>10.8g</td>
  </tr>

  <tr>
    <th>Saturated</th>
    <td>15.7g</td>
    <td>7.9g</td>
    <td>3.9g</td>
  </tr>

  <tr class="even">
    <th>Sodium</th>
    <td>1,941.9mg</td>
    <td>971mg</td>
    <td>485.5mg</td>
  </tr>

  <tr>
    <th>Carbohydrates</th>
    <td>78.6g</td>
    <td>39.3g</td>
    <td>19.7g</td>
  </tr>

  <tr class="even">
    <th>Fiber</th>
    <td>0g</td>
    <td>0g</td>
    <td>0g</td>
  </tr>

  <tr>
    <th>Sugar</th>
    <td>10.9g</td>
    <td>5.5g</td>
    <td>2.7g</td>
  </tr>

  <tr class="even">
    <th>Protein</th>
    <td>10.5g</td>
    <td>5.3g</td>
    <td>2.6g</td>
  </tr>
</table>

It looks fine when being viewed on a laptop but it doesn't look great when in mobile view. What I'm looking to do is that when I'm in mobile view it will change to something like:

enter image description here

and then underneath it will be a separate table for per 100g and then a 3rd for per buttery if that makes sense?

For this I am not sure how I could go about that though, would someone be able to point me in the right direction?

I'm thinking this is the best direction to go with? Unless someone has a better idea? Thanks again.

Upvotes: 0

Views: 1769

Answers (1)

julien.giband
julien.giband

Reputation: 2619

As a first lead, and despite agreeing with the suggestions for a select box, here's how you would have to do it with 3 tables for mobile:

  • Show your table as you did, but set a class to the columns to ease hiding them and styling them in general
  • Repeat your table 2 more times with only one data column each time (per 100g, per buttery)
  • Hide those 2 additional tables on large screens (by default) using CSS
  • Use a media query to trigger the changes:
    • Hide 3rd and 4th columns in your large table
    • Show both mobile tables
    • Adjust widths for better display

You can see the change in display in the below snippet by adjusting your window size

table.main {
  width: 600px;
}

table.mobile {
  display: none;
}

table.composition {
  border: none;
  border-spacing: 0;
  border-collapse: collapse;
}

th,
td {
  padding: 7px 10px 10px 10px;
}

th {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 90%;
  bottom-border: 2px solid #111111;
  border-top: 1px solid #999;
  text-align: left;
}

tr:nth-child(2n) {
  background-color: #efefef;
}

tr:hover {
  background-color: #c3e6e5;
}

@media screen and (max-width: 600px) {
  table.main .per-50g {
    display: none;
  }
  table.main .per-100g {
    display: none;
  }
  
  table.mobile {
    display: table;
  }
  
  table.composition {
    width: 100%;
  }

  table.composition td {
    width: 50%;
  }
}
<table class="main composition">
  <tr>
    <th></th>
    <th>Per 4 Pack(200G)</th>
    <th class="per-100g">Per 100g</th>
    <th class="per-50g">Per Buttery(50G)</th>
  </tr>

  <tr>
    <th>Calories</th>
    <td>724</td>
    <td class="per-100g">362</td>
    <td class="per-50g">181</td>
  </tr>

  <tr>
    <th>Fat</th>
    <td>43.1g</td>
    <td class="per-100g">21.6g</td>
    <td class="per-50g">10.8g</td>
  </tr>

  <tr>
    <th>Saturated</th>
    <td>15.7g</td>
    <td class="per-100g">7.9g</td>
    <td class="per-50g">3.9g</td>
  </tr>

  <tr>
    <th>Sodium</th>
    <td>1,941.9mg</td>
    <td class="per-100g">971mg</td>
    <td class="per-50g">485.5mg</td>
  </tr>

  <tr>
    <th>Carbohydrates</th>
    <td>78.6g</td>
    <td class="per-100g">39.3g</td>
    <td class="per-50g">19.7g</td>
  </tr>

  <tr>
    <th>Fiber</th>
    <td>0g</td>
    <td class="per-100g">0g</td>
    <td class="per-50g">0g</td>
  </tr>

  <tr>
    <th>Sugar</th>
    <td>10.9g</td>
    <td class="per-100g">5.5g</td>
    <td class="per-50g">2.7g</td>
  </tr>

  <tr>
    <th>Protein</th>
    <td>10.5g</td>
    <td class="per-100g">5.3g</td>
    <td class="per-50g">2.6g</td>
  </tr>
</table>

<table class="mobile per-100g composition">
  <tr>
    <th></th>
    <th class="per-100g">Per 100g</th>
  </tr>

  <tr>
    <th>Calories</th>
    <td class="per-100g">362</td>
  </tr>

  <tr>
    <th>Fat</th>
    <td class="per-100g">21.6g</td>
  </tr>

  <tr>
    <th>Saturated</th>
    <td class="per-100g">7.9g</td>
  </tr>

  <tr>
    <th>Sodium</th>
    <td class="per-100g">971mg</td>
  </tr>

  <tr>
    <th>Carbohydrates</th>
    <td class="per-100g">39.3g</td>
  </tr>

  <tr>
    <th>Fiber</th>
    <td class="per-100g">0g</td>
  </tr>

  <tr>
    <th>Sugar</th>
    <td class="per-100g">5.5g</td>
  </tr>

  <tr>
    <th>Protein</th>
    <td class="per-100g">5.3g</td>
  </tr>
</table>

<table class="mobile per-50g composition">
  <tr>
    <th></th>
    <th class="per-50g">Per Buttery(50G)</th>
  </tr>

  <tr>
    <th>Calories</th>
    <td class="per-50g">181</td>
  </tr>

  <tr>
    <th>Fat</th>
    <td class="per-50g">10.8g</td>
  </tr>

  <tr>
    <th>Saturated</th>
    <td class="per-50g">3.9g</td>
  </tr>

  <tr>
    <th>Sodium</th>
    <td class="per-50g">485.5mg</td>
  </tr>

  <tr>
    <th>Carbohydrates</th>
    <td class="per-50g">19.7g</td>
  </tr>

  <tr>
    <th>Fiber</th>
    <td class="per-50g">0g</td>
  </tr>

  <tr>
    <th>Sugar</th>
    <td class="per-50g">2.7g</td>
  </tr>

  <tr>
    <th>Protein</th>
    <td class="per-50g">2.6g</td>
  </tr>
</table>

You could use some javascript to duplicate the table, if that suits your use case.

Upvotes: 1

Related Questions