我具有以下HTML / CSS结构：
table {
table-layout: fixed;
width: 100%;
height: 100%;
}
#quad-main {
position: absolute;
top: 2.5%;
right: 2.5%;
width: 95%;
height: 20%;
border: 1px #000 solid;
}
.left-align {
text-align: left;
}
.logo-img-style {
width: 100%;
height: 100%;
}
#lbl-logo {
width: 100%;
height: 100%;
object-fit: contain;
}<div id="quad-main">
<table>
<tr>
<th class="left-align">
<div class="logo-img-style">
<img id="lbl-logo" src="a_img.png" />
</div>
</th>
</tr>
</table>
</div>问题是：为什么表大于主div（“ quad-main”）？如果四边形主要尺寸是固定的（并且是固定的），并且表格具有100％w和100％h（这意味着完全适合父尺寸），为什么在我的图形视图中表格看起来比div大？
所有桌子的孩子都具有100％的身高，因此它们一定不能大于桌子，从理论上讲，桌子不能大于第一格。
也设置max-width和max-height不会改变任何东西。
任何想法？
尝试一下，我认为这对您来说已经足够了。您必须提供table-layout：fixed;width：100％; height：100％;属性为table tr类。见下文。
table tr {
table-layout: fixed;
width: 100%;
height: 100%;
}
table tr {
table-layout: fixed;
width: 100%;
height: 100%;
}
#quad-main {
position: absolute;
top: 2.5%; right: 2.5%;
width: 95%; height: 20%;
border: 1px #000 solid;
}
.left-align {
text-align: left;
}
.logo-img-style {
width: 100%; height: 100%;
}
#lbl-logo {
width: 100%; height: 100%;
object-fit: cover;
}<div id = "quad-main">
<table>
<tr>
<th class = "left-align">
<div class = "logo-img-style">
<img id = "lbl-logo" src = "a_img.png"></img>
</div>
</th>
</tr>
</table>
</div>表在表单元格周围还有border-spacing，内部还有padding。将其设置为0，其宽度将与其容器的宽度一样大。
table {
table-layout: fixed;
width: 100%;
height: 100%;
padding:0;
border-spacing:0; /* new */
}
#quad-main {
position: absolute;
top: 2.5%;
right: 2.5%;
width: 95%;
height: 20%;
border: 1px #000 solid;
}
.left-align {
text-align: left;
padding:0; /* new */
}
.logo-img-style {
width: 100%;
height: 100%;
}
#lbl-logo {
width: 100%;
height: 100%;
object-fit: contain;
}<div id="quad-main">
<table>
<tr>
<th class="left-align">
<div class="logo-img-style">
<img id="lbl-logo" src="a_img.png" />
</div>
</th>
</tr>
</table>
</div><!DOCTYPE html>
<html>
<title>Web Page Design</title>
<head>
<style type="text/css">
table tbody {
table-layout: fixed;
width: 100%;
height: 100%;
}
#quad-main {
position: absolute;
top: 2.5%; right: 2.5% bottom:2.5%;
width: 95%; height: 20%;
border: 1px #000 solid;
}
.left-align {
text-align: left;
}
.logo-img-style {
width: 100%; height: 100%;
}
#lbl-logo {
width: 100%; height:100px;
object-fit: contain;
}
</style>
</head>
<body>
<div id = "quad-main">
<table>
<tr>
<th class = "left-align">
<div class = "logo-img-style">
<img id = "lbl-logo" src = "https://perureports.com/wp-content/uploads/2018/02/travel-2.jpg"></img>
</div>
</th>
</tr>
</table>
</div>
</body>
</html>
标签用于将HTML表格中的正文内容分组。标记必须在以下上下文中使用：作为元素的子元素，在，和之后。对您的编码有用
尝试一下
.tabedescp {
height: 100%;
width: 100%;
float: left;
}
.table, th, td {
border: 1px solid black;
border-collapse: collapse;
border-spacing: 0px;
width: 210px;
table-layout: fixed;
}