HTML <table> 不适合容器（总是更大）答案

【问题标题】：HTML <table> won't fit in container (always bigger)HTML <table> 不适合容器（总是更大）
【发布时间】：2019-06-23 15:46:37
【问题描述】：

我有以下 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% 的高度，所以它们不能大于表，理论上不能大于第一个 div。

同时设置 max-width 和 max-height 不会改变任何东西。

有什么想法吗？

【问题讨论】：

标签： html css styles

【解决方案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;

}

【讨论】：

【解决方案2】：

试试这个我认为这对你来说已经用完了。你必须给 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>

【讨论】：

感谢您的建议 :)

【解决方案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 表格中的正文内容进行分组。该标记必须在以下上下文中使用：作为元素的子元素，位于任何、和元素之后。对您的编码很有用

【讨论】：

【解决方案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>

【讨论】：