Html 在 CSS 中，如何使表格扩展以填充容器 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23344002/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
In CSS, how can I make a table expand to fill a container div?
提问by teddy teddy
I want to "carve out" spaces on the screen by creating several container DIVs, then fill in the content in each of the DIVs. in one case, I need to fill up with a table.
我想通过创建多个容器 DIV 在屏幕上“划出”空间，然后填充每个 DIV 中的内容。在一种情况下，我需要填满一张桌子。
the innermost part of the table are jpeg <img>. I do not want to use fixed pixel sizes anywhere, so that the content will shrink nicely in different size browsers.
表格的最里面部分是 jpeg <img>。我不想在任何地方使用固定的像素大小，这样内容会在不同大小的浏览器中很好地缩小。
After repeated trial and errors, and some reading on the internet, I figured out that to let the whole chain container-div--->table-->tbody-->tr-->td-->img fit nicely in size, I must make sure that each of these elements have the following attributes "height:100%; width:100; position:relative"(the img position itself can be absolute ).
经过反复试验和错误，以及在互联网上的一些阅读，我想出让整个链 container-div--->table-->tbody-->tr-->td-->img 适合大小，我必须确保这些元素中的每一个都具有以下属性"height:100%; width:100; position:relative"（img 位置本身可以是绝对的）。
This works fine with a table of 1 row only. but if I have multiple rows, it looks that the row height is calculated naiively from its parent, which is tbody, because if I have 2 rows, each row is still as high as the tbody. but even after I manually divide the height of TR by 2, it does not exactly fit into the container.
这仅适用于只有 1 行的表格。但是如果我有多行，看起来行高是从它的父级（tbody）天真地计算出来的，因为如果我有 2 行，每行仍然和 tbody 一样高。但即使我手动将 TR 的高度除以 2，它也不能完全适合容器。
So how can I make the table shrink automatically to the surrounding container?
那么如何让表格自动收缩到周围的容器呢？
<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>
回答by davidcondrey
Just set the width and height of your table to 100%. But the parent div of the table must have an assigned height if the cells are empty they will not take up any vertical space without a height specified.
只需将表格的宽度和高度设置为 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>