html - 在 CSS 中，如何使表格展开以填充容器 div？

Question

我想通过创建几个容器 DIV 在屏幕上“划出”空间，然后在每个 DIV 中填充内容。在一种情况下，我需要填写一张表格。

表格的最里面是jpeg <img> .我不想在任何地方使用固定的像素大小，这样内容会在不同大小的浏览器中很好地缩小。

经过反复尝试和网上的一些阅读，我想出了让整个链条 container-div--->table-->tbody-->tr-->td-->img fit大小合适，我必须确保这些元素中的每一个都具有以下属性 "height:100%; width:100; position:relative" (img 位置本身可以是绝对的)。

这适用于只有 1 行的表格。但是如果我有多行，看起来行高是从它的父级 tbody 天真地计算的，因为如果我有 2 行，每行仍然和 tbody 一样高。但即使在我手动将 TR 的高度除以 2 之后，它也不完全适合容器。

那么如何让表格自动收缩到周围的容器中呢？

    <style type="text/css">

div {
border : 2px solid red;
}

#bottom-banner {
height:40%;
}

#bottom-banner tbody {
position:relative;
height:100%;
width:100%;
}

#bottom-banner tr {
max-height:100%;
width:100%;
position:relative;
height:100%;
}


<style type="text/css">

div {
border : 2px solid red;
}

#bottom-banner {
height:40%;
}

#bottom-banner tbody {
position:relative;
height:100%;
width:100%;
}

#bottom-banner tr {
max-height:100%;
width:100%;
position:relative;
height:100%;
}
#bottom-banner table {
position:relative;
height:100%;
width:100%;
}

#bottom-banner div {
position:relative;
height:100%;
width:100%;
}

#bottom-banner img {
height:100%;
position:absolute;
right:0;
left:0;
margin:auto;
top:0;
bottom:0;
width:auto;
}
</style>

<div id="bottom-banner">

<table><tbody>
<tr>
<td >
<div><img src="11a2.jpg"/></div>
</td>
</tr>

<tr>
<td >
<div><img src="11a2.jpg"/></div>
</td>
</tr>

</tbody></table>
</div>

Answer 1

只需将表格的宽度和高度设置为 100%。但是，如果单元格为空，表格的父 div 必须指定高度，如果没有指定高度，它们将不会占用任何垂直空间。

div { width: 100%;height: 500px;border: 5px yellow solid; }
table { width: 100%;height: 100%;border: 3px red double; }

<div>
  <table>
    <tr>
      <td bgcolor="#2062AF"></td>
      <td bgcolor="#05BDB0"></td>
      <td bgcolor="#FEFCC2"></td>
      <td bgcolor="#FAA72A"></td>
      <td bgcolor="#CD3450"></td>
    </tr>
  </table>
</div>