Javascript 在移动视图中调整表的布局

对于我的站点，我有一个表，我已经在这里完成了：

表格{
宽度：600px；
}
th，
运输署{
填充：7px 10px 10px 10px；
}
th{
文本转换：大写；
字母间距：0.1米；
字体大小：90%；
下边框：2px实心#111111；
边框顶部：1px实心#999；
文本对齐：左对齐；
}
平{
背景色：#EFEF；
}
tr：悬停{
背景色：#c3e6e5；
}

每4包（200克）
每100克
每黄油（50克）
卡路里
724
362
181
脂肪
43.1g
21.6g
10.8克
饱和的
15.7克
7.9克
3.9克
钠
1941.9毫克
971mg
485.5mg
碳水化合物
78.6克
39.3g
19.7克
纤维
0g
0g
0g
糖
10.9克
5.5g
2.7克
蛋白质
10.5g
5.3g
2.6g

作为第一个潜在客户，尽管同意选择框的建议，但以下是使用3个移动表格的方法：

• 按原样显示表，但为列设置一个类，以便于隐藏它们和设置它们的样式
• 每次只使用一个数据列（每100g，每黄油）重复表2次
• 使用CSS在大屏幕上隐藏这两个附加表（默认情况下）
• 使用媒体查询触发更改：
  • 隐藏大表中的第三列和第四列
  • 显示两个移动表
  • 调整宽度以获得更好的显示效果

通过调整窗口大小，可以在下面的代码段中看到显示的更改

table.main{
宽度：600px；
}
表1.mobile{
显示：无；
}
表1.组成{
边界：无；
边界间距：0；
边界塌陷：塌陷；
}
th，
运输署{
填充：7px 10px 10px 10px；
}
th{
文本转换：大写；
字母间距：0.1米；
字体大小：90%；
下边框：2px实心#111111；
边框顶部：1px实心#999；
文本对齐：左对齐；
}
tr:n个孩子（2n）{
背景色：#EFEF；
}
tr：悬停{
背景色：#c3e6e5；
}
@媒体屏幕和屏幕（最大宽度：600px）{
表1.main.per-50g{
显示：无；
}
表1.main.per-100g{
显示：无；
}
表1.mobile{
显示：表格；
}
表1.组成{
宽度：100%；
}
表1.1构成td{
宽度：50%；
}
}

每4包（200克）
每100克
每黄油（50克）
卡路里
724
362
181
脂肪
43.1g
21.6g
10.8克
饱和的
15.7克
7.9克
3.9克
钠
1941.9毫克
971mg
485.5mg
碳水化合物
78.6克
39.3g
19.7克
纤维
0g
0g
0g
糖
10.9克
5.5g
2.7克
蛋白质
10.5g
5.3g
2.6g
每100克
卡路里
362
脂肪
21.6g
饱和的
7.9克
钠
971mg
碳水化合物
39.3g
纤维
0g
糖
5.5g
蛋白质
5.3g
每黄油（50克）
卡路里
181
脂肪
10.8克
饱和的
3.9克
钠
485.5mg
碳水化合物
19.7克
纤维
0g
糖
2.7克
蛋白质
2.6g

有3个表肯定可以工作，但它会让你的页面相当长。另一种解决方案可能是使用下拉菜单，允许用户选择数量。然后，您甚至可以记住最后选择的值，因此，如果用户同时查看其他产品，则比较起来更容易。另一个你可能想尝试的解决方案是，先固定左栏，然后固定其他3个可滚动的栏，甚至可以使用按钮（箭头）轻松地从一个栏切换到另一个栏。如果你不反对使用任何外部库，我建议你在还没有使用的情况下使用。它提供了极大的灵活性，使您的表响应。引导程序主要设置表在容器中滚动的点。它与此处所请求的内容完全不同。@VincentPict下拉选项听起来不错，您是否碰巧有相关示例的链接？您在此处所请求的内容并不清楚。您将无法使用CSS重新构造表。例如，您可以使用媒体查询显示和隐藏列，但这需要您在页面中多次放置标记，以便为mobile显示多个表。您需要决定什么是最适合您用户的解决方案，并修改以询问更具体的问题。谢谢！这很好，我想我也会研究选择框选项，但是我仍然会接受你的答案，因为它确实回答了我的问题：）