Reputation: 25

Style HTML Table for Mobile

How do I better style my table for mobile? It looks fine on desktop but when I try to view the page on my phone all it shows is the middle of the table and I have to scroll left and right to view the other colums.

Here's the website - https://sites.google.com/view/cash-counts-arbys/home

Here's the code -

''' '''

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
  background: #EEE;
  margin: 0;
  padding: 0;
}

/* Navigation */

.navigation {
  box-sizing: border-box;
  background-color: #3587A4;
  overflow: auto;
  padding: 18px 50px;
  position: relative;
  top: 0;
  width: 100%;
  z-index: 999;
}

ul {
  padding: 0;
  margin: 0;
}

li {
  color: #FFF;
  display: inline-block;
  font-family: 'Oxygen', sans-serif;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 2px;
  margin: 0;
  padding: 20px 18px 10px 18px;
  text-transform: uppercase;
}

.active {
  color: #88CCF1;
}

/* Table */

table {
  height: 40%;
  left: 10%;
  margin: 20px auto;
  overflow-y: scroll;
  position: static;
  width: 80%;
}

thead th {
  background: #88CCF1;
  color: #FFF;
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  font-weight: 100;
  letter-spacing: 2px;
  text-transform: uppercase;
}

tr {
  background: #f4f7f8;
  border-bottom: 1px solid #FFF;
  margin-bottom: 5px;
}

th, td {
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  padding: 20px;
  text-align: left;
  width: 33.3333%;
}

.search {
  background-color: #FFF;
  border: 1px solid #DDD;
  border-radius: 3px;
  color: #AAA;
  padding: 20px;
  margin: 50px auto 0px auto;
  width: 77%;
}
  </style>
  <title>Arbys Draw Counts</title>
  <link href="https://fonts.googleapis.com/css?family=Lato: 100,300,400,700|Luckiest+Guy|Oxygen:300,400" rel="stylesheet">
  <link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>

  <ul class="navigation">
    <li><img src="data:image/png;base64,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" height="80px;"></li>
    <li>Arby's Draw Counts</li>
    <li>Made by _</li>
  </ul>
  <table>
  <tr>
    <th>Bill Type</th>
    <th>Amount of Bills</th>
    <th>Cash Amount of Type</th>
  </tr>
  <tr>
    <td><label for="usd-100">100$</label></td>
    <td><input id="usd-100" type="number" step="1" min="0" value="0">$</td>
    <td><output for="usd-100">0</output>$</td>
  </tr>
  <tr>
    <td><label for="usd-50">50$</label></td>
    <td><input id="usd-50" type="number" step="1" min="0" value="0">$</td>
    <td><output for="usd-50">0</output>$</td>
  </tr>
  <tr>
    <td><label for="usd-20">20$</label></td>
    <td><input id="usd-20" type="number" step="1" min="0" value="0">$</td>
    <td><output for="usd-20">0</output>$</td>
  </tr>
  <tr>
    <td><label for="usd-10">10$</label></td>
    <td><input id="usd-10" type="number" step="1" min="0" value="0">$</td>
    <td><output for="usd-10">0</output>$</td>
  </tr>
  <tr>
    <td><label for="usd-5">5$</label></td>
    <td><input id="usd-5" type="number" step="1" min="0" value="0">$</td>
    <td><output for="usd-5">0</output>$</td>
  </tr>
  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
  
  </body>
  </html>
  <tr>
    <td><label for="usd-1">1$</label></td>
    <td><input id="usd-1" type="number" step="1" min="0" value="0">$</td>
    <td><output for="usd-1">0</output>$</td>
  </tr>
  <tr>
    <td colspan="2">Sum</td>
    <td><output for="usd-100 usd-50 usd-20 usd-10 usd-5 usd-1" id="sum-total">0</output>$</td>
  </tr>
</table>
<table>
  <tr>
    <th>Change Type</th>
    <th>Number of Coins</th>
    <th>Cash Amount of Type</th>
  </tr>
  <tr>
    <td><label for="usd-quarter">0.25$</label></td>
    <td><input id="usd-quarter" type="number" step="1" min="0" value="0"></td>
    <td><output for="usd-quarter">0</output>$</td>
  </tr>
  <tr>
    <td><label for="usd-dime">0.10$</label></td>
    <td><input id="usd-dime" type="number" step="1" min="0" value="0"></td>
    <td><output for="usd-dime">0</output>$</td>
  </tr>
  <tr>
    <td><label for="usd-nickel">0.05$</label></td>
    <td><input id="usd-nickel" type="number" step="1" min="0" value="0"></td>
    <td><output for="usd-nickel">0</output>$</td>
  </tr>
  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
  
  </body>
  </html>
  
  <tr>
    <td><label for="usd-penny">0.01$</label></td>
    <td><input id="usd-penny" type="number" step="1" min="0" value="0">$</td>
    <td><output for="usd-penny">0</output>$</td>
  </tr>
  <tr>
    <td colspan="2">Sum</td>
    <td><output for="usd-quarter usd-dime usd-nickel usd-penny" id="sum-total-change">0</output>$</td>
  </tr>
</table>
</body>
</html>

<html>
<body>
  <table>
    <tr>
      <th>Sum of Draw</th>
      <th>Drop</th>
      <th>Draw After Drop</th>
    </tr>
<!DOCTYPE html>
  <html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
  
  </body>
  </html>
  
    <tr>
      <td><output id="draw">0</output>$</td>
      <td><input id="drop" type="number" step="1" min="0" value="0">$</td>
      <td><output id="newdraw">0</output>$</td>
    </tr>
  </table>
</body>
</html>
<script>
document.querySelectorAll('input').forEach(el =>
  el.addEventListener('change', function() {
    // getting the value of the inputs
    let usd_100     = +document.querySelector('#usd-100').value,
        usd_50      = +document.querySelector('#usd-50').value,
        usd_20      = +document.querySelector('#usd-20').value,
        usd_10      = +document.querySelector('#usd-10').value,
        usd_5       = +document.querySelector('#usd-5').value,
        usd_1       = +document.querySelector('#usd-1').value,
        usd_quarter = +document.querySelector('#usd-quarter').value,
        usd_dime    = +document.querySelector('#usd-dime').value,
        usd_nickel  = +document.querySelector('#usd-nickel').value,
        usd_penny   = +document.querySelector('#usd-penny').value,
        drop        = +document.querySelector('#drop').value;
    
    // calculating the sum of each row
    let sum_usd_100     = usd_100 * 100,
        sum_usd_50      = usd_50 * 50,
        sum_usd_20      = usd_20 * 20,
        sum_usd_10      = usd_10 * 10,
        sum_usd_5       = usd_5 * 5,
        sum_usd_1       = usd_1 * 1,
        sum_usd_quarter = usd_quarter / 4,
        sum_usd_dime    = usd_dime / 10,
        sum_usd_nickel  = usd_nickel / 20,
        sum_usd_penny   = usd_penny / 100,
        sum_drop        = drop * 1;
    
    // outputting the sum of each row
    document.querySelector('output[for="usd-100"]').value = sum_usd_100;
    document.querySelector('output[for="usd-50"]').value = sum_usd_50;
    document.querySelector('output[for="usd-20"]').value = sum_usd_20;
    document.querySelector('output[for="usd-10"]').value = sum_usd_10;
    document.querySelector('output[for="usd-5"]').value = sum_usd_5;
    document.querySelector('output[for="usd-1"]').value = sum_usd_1;
    document.querySelector('output[for="usd-quarter"]').value = sum_usd_quarter;
    document.querySelector('output[for="usd-dime"]').value = sum_usd_dime;
    document.querySelector('output[for="usd-nickel"]').value = sum_usd_nickel;
    document.querySelector('output[for="usd-penny"]').value = sum_usd_penny;
    
    // getting the total sum of the entire column
    document.querySelector('#sum-total').value = sum_usd_100 + sum_usd_50 + sum_usd_20 + sum_usd_10 + sum_usd_5 + sum_usd_1;
    document.querySelector('#sum-total-change').value = sum_usd_quarter + sum_usd_dime + sum_usd_nickel + sum_usd_penny;
    document.querySelector('#draw').value = sum_usd_100 + sum_usd_50 + sum_usd_20 + sum_usd_10 + sum_usd_5 + sum_usd_1 + sum_usd_quarter + sum_usd_dime + sum_usd_nickel + sum_usd_penny;
    document.querySelector('#newdraw').value = sum_usd_100 + sum_usd_50 + sum_usd_20 + sum_usd_10 + sum_usd_5 + sum_usd_1 + sum_usd_quarter + sum_usd_dime + sum_usd_nickel + sum_usd_penny - sum_drop;
  })
)
</script>

''' '''

Upvotes: 2

Answers (1)

user19881049

Reputation:

Tables are inherently not very responsive for a few reasons, which is one of many reasons they aren't often used anymore. You're better off using a display: grid system.

The reason tables aren't responsive is because once content is entered into the cell, it is stuck in that cell, in that column, in that row until the end of time unless you want to get really complex with your styling.

Right now, your table has its own scroll on it, which is already going to act against you. In a small viewport, that scroll is going to make it more difficult for you to scroll on a touchscreen. In fact, most interaction is more difficult on a touchscreen, which is why Mobile First design is still used today, more than a decade after it was first conceived. Designing for the screen that has more requirements and fewer capabilities first is easier than trying to adapt an already-made large-screen design.

I have a few suggestions to start you off:

Get rid of the inner scroll on your table
Use display: grid; instead of a table
Design your new grid-based form for mobile first, then adapt the mobile for desktop
Use your phone to look at pages with similar content to get an idea about sizing for your margins, padding, height, font-size, etc.

Upvotes: 2

Style HTML Table for Mobile

Answers (1)

Related Questions