我有以下 HTML/CSS 结构：

ta,html,css,styles"/>
	














    

		

        

            
            时间戳
        

		

		

        
		

    
















	
首页  > 解决方案 > HTML 不适合容器（总是更大）
我有以下 HTML/CSS 结构：







ta












html - HTML 不适合容器（总是更大）
我有以下 HTML/CSS 结构：







ta






问题描述



我有以下 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 大？



所有 table 孩子也有 100% 的高度，所以他们不能比 table 大，理论上，不能比第一个 div 大。



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



任何想法？






试试这个



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

}



标签： htmlcssstyles


解决方案









试试这个，我认为这对你来说已经用完了。你必须给出表格布局：固定；
宽度：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>
















推荐阅读