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父级而不是TABLE上会使整个区域显示为黄色。

编辑：

不幸的是，基于％的高度需要某些东西来指代具有像素高度的父元素。如果父级具有％高度，那么父级将需要引用像素高度（或者在层次结构中递增％）。

基本上，您可能只能在某处以像素为单位完成所需的工作。

Answer 2

使这项工作的技术应该如下所示，但是，看起来位置：相对于TD元素的效果是not defined。

CSS：

td#parent {
  position: relative;
}

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

因此，您的解决方案是使用Javascript动态修改内部表的高度和宽度，或者远离表格并使用div和＆amp; CSS。

<table> </table> <table> </table>中的a的高度

2 个答案: