html – 在CSS中,如何使表扩展以填充容器div？

我想通过创建几个容器DIV来“分割”屏幕上的空格,然后填写每个DIV中的内容.在一个案例中,我需要填写一张桌子.

表格的最里面部分是jpeg< img>.我不想在任何地方使用固定像素大小,因此内容将在不同大小的浏览器中很好地缩小.

经过反复试验和错误,以及互联网上的一些阅读,我想通了让整个连锁容器-db —> table – > tbody – > tr – > td – > img非常适合大小,我必须确保每个元素都具有以下属性“height：100％; width：100; position：relative”(img position本身可以是绝对的).

这适用于仅有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>

解决方法

只需将表格的宽度和高度设置为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>