html表格宽度整体设置,如何在HTML中设置正确的表格宽度？

在下面的html代码中，我创建了一个表格。但列宽不正确。我也添加了CSS代码和输出图像。请告诉我我错在哪里，为什么表列宽度不相等。提前致谢。如何在HTML中设置正确的表格宽度？

body {

width: 800px;

margin: auto;

margin-top: 100px;

}

header {

background-color: #EC7063;

border-radius: 10px;

text-align: center;

}

main {

background-color: #76D7C4;

border-radius: 10px;

padding: 20px;

}

h1 {

color: #21618C;

}

#cat {

border-radius: 10px;

background-color: #27AE60;

padding: 10px;

margin-right: 20px;

float: left;

height: 200px;

}

h2 {

color: #21618C;

}

#prod {

border-radius: 10px;

background-color: #AF7AC5;

height: 200px;

padding: 10px;

overflow: hidden;

}

table {

display: block;

overflow: auto;

height: 100px;

table-layout: fixed;

width: 100%;

}

table,

th,

td {

border: 1px solid black;

border-collapse: collapse;

}

td {

text-align: center;

}

footer {

background-color: #EC7063;

border-radius: 10px;

text-align: center;

font-size: 25px;

color: #F8F9F9;

clear: both;

}

My Guitar Shop

Product Manager

Product List

Categories

• Guitars
• Basses
• Drums
• Flutes
• Trumpets

Guitars

Code	Name	Price	Delete
gu	ytr	0000000546
yui	uyt	0000000888
oi	iu	0000000098

Add Product

© 2017 My Guitar Shop, Inc.

2017-06-14

KawaiKx

+0

尝试从您的表中删除'display：block' –

+0

试过。尽管它将列宽设置为正确，但它无济于事。它删除滚动。 –

+0

如果您需要更多帮助，请提供实际可用的代码 - 即生成的HTML代码，而不是PHP代码，即使他们尝试过，也无法在系统中正确执行代码。 [mcve] –