javascript表对齐

我正在尝试使用js循环、填充、间距等将表格标题与另一个页面中的项目对齐。。什么都没用

$（文档）.ready（函数（）{
let products=[‘面包’、‘糖果’、‘咖啡’]；
$（'#prepurchased'）.html（'Item Pricequantity'）；
产品.forEach（功能（i）{
设p=sessionStorage.getItem（i）；
如果（p！==null）{
p=JSON.parse（p）；
$（“#预购”）。追加（“”+i+“”+“”$”+p.price+“”+“”+p.quantity+“”）；
$（'purchase'）.css（'display'，'block'）；
}
});
});
您的所有数据都应该在同一个
中。这就是桌子的用途。看

此外：


似乎您想将
和

我删除了一个令人困惑的空

您使“购买”按钮在每个数据行都可见，这似乎没有什么用处
if（p！==null）
在
p
未定义时不阻止呈现JSON。只要写
if（p）
$（document）.ready（…）
的编写时间更长。您可以使用速记
$（…）
为了让代码片段实时运行，我不得不伪造会话存储


$（\u e=>{
const products=[“面包”、“糖果”、“咖啡”]；
$（'#prepurchased'）.html（'ItemPricequantity'）；
products.forEach（i=>{
//让p=sessionStorage.getItem（i）；//TODO:还原此
设p=fakeStorage[i]；//TODO:删除此
如果（p）{
p=JSON.parse（p）；
$（'prepurchased.cart tbody'）。追加（''+i+'+'$'+p.price+''+''+'+p.quantity+''）；
}
});
if（产品长度）
$（'purchase'）.css（'display'，'block'）；
});
//TODO:删除，仅用于测试（跨域js会话存储出错）
假货储存={
"面包":""价格:21.2,数量:25",，
"咖啡":""价格:34.55,数量:32",，
/*“糖果”：“{“价格”：6.12，“数量”：1}”*/
};
正文{
文本对齐：居中；
}
.购物车{
文本对齐：居中；
}
.购物车{
宽度：15em；
}
.按钮{
边缘顶端：2rem；
显示器：flex；
证明内容：中心；
}

购买
您应该提供一个。使用问题编辑器的堆栈代码段功能。有些人评论说，不要用同一代码的多个版本来混水。请务必包含运行它所需的HTML。我试图制作您的代码片段，但它出错了。请查看是否可以修复它，以便我们进行调试。您可能必须将会话存储数据交换为局部变量。为什么要使用多个表而不是多行表（这样可以解决问题）。或者更好一点，为什么要完全避免使用表而开始使用div呢？表是这类数据的正确结构（与我最初的评论相反）。转换为div不应该是下意识的反应。不过，正如你所说，一张桌子似乎很合适。非常感谢！事实上，我是js新手，这是我的第一个项目，它解释了为什么我犯了所有这些错误，我们都曾经犯过这些错误。不是吗？