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 >
<li><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJUAAAB/CAMAAADRo3CZAAAAclBMVEX////XGSHVAADXFR7SAADsr6/XEhvWAA755ub /vbRUbWBRPWCxb9 Pj77u/VAAjheHjeW1344eLaNDf329z88/PzzM3wvL3utLXibnD109Tom5vZLDHXJSfmj5Dxw8PrpafcVFXfZmfaOT7kg4TcTU/f25vQAAAMN0lEQVR4nM1c2YKiOhCVJAQQlB2UTdn /xcvpCoQ1HbQFvvWywwKeEiqTq30bvcxiS9eX2r7LjU/d89fy2VPDK5p3CBFdfxrMFJSNkACoaS8/DUckAvRFOGk mtAo1itoy2EnP8a0iAnomn/P1iNfYtK /tNtFwqkDiEuJPSu6c/QGIml4mYDkzgsP0syVu5mZR9nbiiprCNojEXqEg2/D/ObVg4zfEP3wXVEWP4aWo4qTjEHRSodrtMUhe5fhOTuZ92CX/4LLTdbuD7oARYtPziHsa9O1kaJYLGdYBpwGLtEkTtet9DtTcUAqA8GIFqYgvtGk9BlNr3FP68ZEx7b 1GRQNNSvGkBpDb31os/ZbGBV0Gjlgs3qPZBaU4pnbwFVAmk2CYhMei4fPOXS5WjovXfQOUhb6FkiqqJKPXwwIdAa3T44kHsENaxl9AlcISUFcfDq5E4SUPF0tGfPgl YLfiUOu/lYuMQ6mFoEZTsxpFXSxeBvKdaktVghhlT2GLbX4vzGFCgiZbR8uE7C0Uh4nyKcslcY5c4EJZknyrUHhUrlzWO7hHhYBErrTWNN3wjB4bT2818fkUAutcvz5I5NT5FLkBntGBZZBabQtqoTN/CRF2qFDgM0NhaBgv4m LSpwI7a/ LBY5hEqBiCLja3wCF5kom QZOmBmBLpIbmRTVGBkdHy5uMrU5dKtbhjCI xac4KzuY d/Hm1bL7hYMBCnO35IYD7se9STUSln0TIgCRKmb5eUkZ0M DFCE3CKfUJv5NkBeJS6i2Ib0DKboPk8 oKzStT28BH8E3bhiRxr2gUJb98P2jXbIa54HVflIiQVb0NTOvxEXudqFfipr70kVAJk797zPflLN47BcTz0ig4vvNAlIgdid56SILjLDcKqcwQa2KF40cYizjtWdZL6kLe/HiZegPtjLCXKAyXq3gVeTOO35SvHeUXRrhVvWGw/45h/4kyabUEKNrftV3ZBC7a5uA2gXgmttX/WwAWSHbBBQy s1xWPLN0RV3SR7a0X69G1iGeAd4/Uaui iBrZN9gWZ4BvlV4xlNiH3IxDDGzffMsKKyneDSmTfTTLVBGppb5gS5PnbVN4vb ebYLxTtG8FkZCP2CRUE3j77pWT8Z6wtFTepkPvCBSujdfCYwWVLSP3nFAQsuoJI8KkPOhmQ91jmTbr0wXPuFW/RSXT7FUUlsx9R07uYjvwG0tLmvqnzjNUp59QrSrjJmrBh90aMir7oowxoXrqh35GtYYsFqicWwXCruSCRNehSn9EtaZSs0BFneWmx4yMwhepykpUzB0vnVCx8VauvZKRk/FXJ1i35aD8OspSE3Rmr0AV50JkDBvAYcPWJeGHvKrqeXzjtnT2QALPW4HqB7msnyzo5m6ku8YPx Cz32q3VdeVJ5ohnVAZawoWx1 gOqzldnWAgzorSgO/QbVaYNZF9tdXRETfQAX1E9svgbIWKVyAMi17kKTJEpWZXC7JTB3mLMFYcDsEyicmluCO2WW4SNz0MIj4N1mSkqiAUecIlUZaKt aTgGiiTvE17ogxI4VVJFXGAMPFf4VfjBoi1BKOS57XoazlIIoTK/lI3mFfrYL6r7v/QFnl pq h8XHH5B1u6vylIx9PRsXAydEk4H2McZVccM6DM7RBNbHzmcShG pSN0FhFpX4nLsTnNqsBwOB CyiqrrqnC gBm9JnYxqIqKjSCgZAtD9ozMyruN4qdwERYxGd7Fn5YYR2I/69kPkMz9uLjYReSygsUtsaazmHu1WYPUAVyRkBBpTnLOafRt/8TVeRS9RqISYa1uqR5Mhsa5Auic5Tcda UtZpG5RRUtzI8T6R88xBVj0/CHXt6gAGV2Z1UvQJnLvjAgnxXqesFDJebRBOQG1QOcyf/bteDQRN5yEVc1LEJlk1YItfSaP2m1uwJ1S4OVHoVa0gL8VGFHeNJ6yxdx952A/fm3HE0BRVn 8GNTmOQdnK45rgafJ PN42uFX7rNvo1xlkNxx/JOvJ/SFagIYl8eMRLVMqCzBywE7L3/b4/TKicVhCVuceHFimNiXeRsRq27KhgF4yzXJyUgrvfoeqwlGeNbBbDSWrpF68T0GkVHYeTjpJFcYJnN/d7RTKE/eCxJQ0/AcvsnGeF0QzUoZTZhmHcppsmjrVorRBEoFDWjIr008ZLVPPYSS579tb8yzLopKiawu5TOaCRC38bn0e5ra1Ix0y5EKkt4T0qWylhTagmNxDhFopAE4dUMIKUQwawTcDZ4x669Sn6oVPX3wyhorBpCydUamCLqNBGxGnQ5ML6KWRGvFCXUVah59Ekmzh 9ahNkN2Pe8Itpq2RqBZ9HMnt zl/LFVUclJk/BrLvfMsxBBgS56inLAwv0tCK3iOUeNQpNbKUyUqpu69XKtwXj JSuwpVnKEJuGEFA8nBYgaTuYt4kS7DX B8J3mPAmeO6VHEtWy243Pb0x6dZA7CDhBMcSKS9VXY7HsWg8pj0TmaMvw9CKeY1FezDADlJT1FNVsq6m0QTjU55ZXvTCMeKzLCF0Kro3E5S6zUJirXCT qLaUmytQ8dCSZyGfY4pk4hypKTdTTthVvCxLCg9jRS1fPAsIzOChqUhBVZN591NUk2Ghq9IM3CcLnne4CZocw8s9Y4iyuJwgy TE5KwJgVlhLR1j2fHnzCMaMm8z0xwj5B5VqAsku5hm1korcts0y9JCOuAp6JdbmCA9yQo3jhu1oOBX9xZVWoY4/mmHoQbxVrwfglg5TKyFRXDkkvSGYw3irmBfFHPIwIkx596zoeEMBMevHFnsAVSaw/3qdPLQRJRpFn0OCamc342JErMNYfHFZMoxDtBGGl/EbYoo ZG/YMKpDoOoxoiaEKQhtduzGP UqIzF77HkqI7C2Iiq/BGUYv2L9ylmJ A9om2ldvQJVEQdAdYMTWn2qPm44hgEKqqUW8a7KENtj1EtnoEl5lNULK6meI9y1iyy7rOr3khFRdusnVSFOos6pg6lKRAGqI5kIeNaqceIypm P 5O yGzGwIkwvenZQAgTkP/VUx4vfG6Yhef9iXcg/eLXP2oqwKu2zotPtRja3EIG3RIpw/GSzK98rxKv 1BmmK4bUyYpOd0vQkvFmUnvL8enq1R/sBwZjS/YOffiLIpSsqdd8QE/Vo7yim9NcS26EwOhgn23xudJ1YHuGsuyQdTti80W55LrE51q5eHAwSTn8gCywosA 2Uy0z7fo2LEcJ231TpYG5rk9/UQsLSvyY/L4Jd2psQqZSFOfDESn97rQCmFo9Gr0L0oLJwl92e1OHOPcumDoGYVp3 cczH85KgYpOvaTe4ew3b8tZzdJ7LmRwMG2TPgVm6SXBlyxcZwoDx339xVsLh/ruTcWbNbOZ6z3djVhvRNeRVjKCgUCNh2/rlj DGjTKse1RvW6BDQFolz2dnD0GwWy7cY3R/7uqJcsTmuHaXNvXvl 3g0q57nioCnH9u nVn SA7z29PY FdRmbeHowL8Yx03OvYGSBbIjK87X9D7jtuyPvGOcZj1rpB/PU7F21BDxElSvtCgdI30R1 segZ5xUnBnzilG2TlX0t5v9o6yZEoy6duYzY52qQLL27vThzcjGDxJfaooh/bohKPlC35s EQO1/p/WFXVkTAn4qjlEBLXito8FtZ2s2Zdr7ZBwBV0HvawnvO0J8TUz97zisQ7Bmmmca4EJ3bu6vpvzRFJ8ZqDr1EoqsV dZValNiRH1s99ygox9XJ6k90IfzPAHcle78Dv/q/WK/KKmXLd4ncjTsHcYBvy3 7y1uT8Ick1NpctKOl u 5Rr4QNrhE26Wuhe2yezq2jBmlu8YHXmOKOKd2BMWzpvTxbxTXHS 7t59IUXM8 9GdKknoZj46BOyN1p1 SBzmPdTgG2SXNzy0bUptlxEOJ1n3s7YlDGrq3FTBqu4TYRdvXftOcvW4U79w0ft23BR2Ld3f9F5sU1WdfFUobRh4UG8eUx3Fsw3BHMWzHcTi/D1dFlZE16edf9TrmNSX2TwXHp0JdUjT6Rn89wopOPSPE/jnpeQDIGTa69C7b/tkBKxnNihHj4T4paCCbZaVfnb7zhxAOx zq1ftw1GliKGmP0DJDDMvRYl83 cBtG79RfIfNzJJUz7uzP5YgRlDlaJGN1 X65ZIFv2aA/wBw rR1HeKB2QAAAABJRU5ErkJggg==" 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>
''' '''
CodePudding user response：
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.