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>
''' '''
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:
display: grid; instead of a table