Question

我具有以下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-宽度和最大高度不会改变任何东西。

有什么想法吗？

Answer 1

尝试

.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;

}

快乐编码！

Answer 2

尝试一下，我认为这对您来说已经足够了。您必须提供 table-layout：fixed; 宽度：100％； 高度：100％； 属性，用于表格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>

Answer 3

<!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表格中的正文内容分组。标记必须在以下上下文中使用：作为元素的子元素，在，和之后。对您的编码有用

Answer 4

该表在表单元格周围还有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>

HTML无法容纳在容器中（总是更大）

4 个答案: