如何更好地设计适合移动设备的表格？它在桌面上看起来不错，但当我尝试在手机上查看页面时，它显示的只是表格的中间，我必须左右滚动才能查看其他列。
这是网站 - https://sites.google.com/view/cash-counts-arbys/home
这是代码-
''' '''
<!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>
''' '''
最佳答案
由于一些原因，表格本质上响应速度不太快，这也是它们不再经常使用的众多原因之一。您最好使用 display: grid 系统。
表格不响应的原因是，一旦将内容输入到单元格中，它就会卡在该单元格、该列、该行中，直到时间结束，除非您想让样式变得非常复杂。
现在，你的 table 上有自己的卷轴，它已经对你起作用了。在小视口(viewport)中，该滚动将使您在触摸屏上滚动变得更加困难。事实上，大多数交互在触摸屏上都比较困难，这就是为什么移动优先设计在首次构思十多年后至今仍在使用。首先针对具有更多要求和更少功能的屏幕进行设计比尝试适应已经完成的大屏幕设计更容易。
我有一些建议可以帮助您开始:
- 去掉 table 上的内卷
- 使用
display: grid;而不是表格 - 首先为移动设备设计基于网格的新表单，然后针对桌面设备调整移动设备
- 使用手机查看具有类似内容的页面，了解边距、内边距、高度、字体大小等的大小。
关于html - 移动设备 HTML 表格样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/74255932/