<table>中<table>的高度

Question

我试着把一张桌子放在桌子里面，让它跨越整个东西高度的100%，如果这是有意义的话。

<table width="800" border="2">
<tr>
    <td width="66%">
        box 1
    </td>
    <td width="10" rowspan="2" />
    <td rowspan="2" height="100%" valign="top">
        <table width="100%" height="100%" bgcolor="yellow">
            <tr>
                <td>
                    box 2
                </td>
            </tr>
        </table>
    </td>
</tr>
<tr>
    <td>
        box 3 <br />
        box 3 <br />
        box 3 <br />
        box 3 <br />
        box 3 <br />
        box 3 <br />
        box 3 <br />
        box 3 <br />
        box 3 <br />
        box 3 <br />
        box 3 <br />
        box 3 <br />
        box 3 <br />
        box 3 <br />
        box 3 <br />
        box 3 <br />
        box 3 <br />
        box 3 <br />
    </td>
</tr>
 </table>

​

基本上，我希望“黄色”表从父表的顶部到底部。我不能将其设置为固定的高度，因为"Box 1“和"Box 3”的高度是基于其中的任何内容而动态变化的。

这个是可能的吗？

Answer 1

切换此选项：

<td rowspan="2" height="100%" valign="top">
        <table width="100%" height="100%" bgcolor="yellow">

要这样做：

<td rowspan="2" height="100%" valign="top" bgcolor="yellow">
        <table width="100%" height="100%">

将背景颜色放在TD父对象上，而不是您的表上，会使整个区域显示为黄色。

编辑：

不幸的是，基于%的高度需要引用一些东西，比如具有像素高度的父元素。如果父对象的高度为%，那么父对象将需要引用像素高度(或递归的%向上)。

基本上，您可能只能在某处以像素为单位的高度完成所需的任务。

Answer 2

实现这项工作的技术应该如下所示，然而，它看起来像是位置:相对对TD元素的影响是not defined。

CSS：

td#parent {
  position: relative;
}

table#inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

因此，您的解决方案是要么使用Javascript动态修改内部表的高度和宽度，要么远离表而使用div& CSS。