Question

我的桌子高度有点奇怪。

我有父表（我知道，我知道表...但我没有选择:(）有一行..包含2个单元格。每个单元格都有自己的表格。子表格有一个我希望他们两个都保持相同的高度，这样无论有多少内容，边框都会对齐。（他们有灵活的内容，所以无法设置）

如果您使用下面的代码并将其转储到html文件中，您将看到（至少在Chrome中）正确的子表格不会填充其所在单元格的100％。如果您删除“height：auto” “在父表上。然后它确实有效，但它也使父表100％高度..

为什么这两件事会相互影响？

<style>
.cl2_h { background:red; }
.cl1_h { background:blue;}
.cl1, .cl2{ width:100%; border:1px solid black;}
table, tbody { height:100%; }
</style>


<table style="border:1px solid red;height:auto;">
<tbody>
<tr style="height:100%;">
    <td style="width:50%">
        <table class="cl2" style="text-align:left;">
            <tbody>
                <tr class="cl2_h">
                    <td>
                        RANDOM TEXT HERE
                    </td>
                </tr>
                <tr>
                    <td>
                        <span>Select which asd asdthis item relates to.</span>
                        <ul>
                            <li>
                                <select>
                                    <option value="-1">Please Select...</option>
                                </select>
                            </li>
                            <li>
                                <select>
                                    <option value="302">Please Select...</option>
                                </select>
                            </li>
                        </ul>
                        SOME RANDOM TEXT
                    </td>
                </tr>
            </tbody>
        </table>
    </td> 
    <td>
        <table class="cl2" style="height:100%">
            <tbody>
                <tr class="cl2_h">
                    <td>
                        asd asd asd asda sda(NTF)
                    </td>
                </tr>
                <tr>
                    <td>
                        DROPDOWNLIST Here
                    </td>
                </tr>
            </tbody>
        </table>
    </td>
</tr>
</tbody>
</table>

值得注意的是，如果我将父级设置为200px，那么它将继续工作......所以我猜真正的问题是为什么在“自动”高度的父表中不起作用

Answer 1

您可以使用Javascript / jQuery完成此操作：

var maxHeight; 
$('.cl2').each(function() { 
    maxHeight = Math.max(maxHeight, $(this).height()); 
}).height(maxHeight);

Answer 2

Steve，“height：auto”没有及时通知浏览器渲染包含表的最终高度，因此子表上的100％在语法上是多余的。

只有当您向父容器提供具有指定高度（或没有高度）的css时，孩子才会知道“100％”在渲染时的含义。

如果你必须在父表上保持高度：auto，那么@RobB有一个很好的javascript解决方案，但我建议为父表设置一个特定的高度，或者如果你能帮助的话，根本不设置一个。< / p>

表格中的HTML表格高度为100％

2 个答案: