在下面的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
Code | Name | Price | Delete |
---|---|---|---|
gu | ytr | 0000000546 | |
yui | uyt | 0000000888 | |
oi | iu | 0000000098 |
© 2017 My Guitar Shop, Inc.
2017-06-14
KawaiKx
+0
尝试从您的表中删除'display:block' –
+0
试过。尽管它将列宽设置为正确,但它无济于事。它删除滚动。 –
+0
如果您需要更多帮助,请提供实际可用的代码 - 即生成的HTML代码,而不是PHP代码,即使他们尝试过,也无法在系统中正确执行代码。 [mcve] –