Question

我创建了下面提到的TABLE：

<html>    
<body>
    <table border="0" cellspacing="0" cellpadding="1" width="100%">
        <colgroup>
            <col span="1" style="width:5%">
                <col span="1" style="width:70%">
                    <col span="1" style="width:25%">
        </colgroup>
        <tr>
            <td colspan="2">
                <div style="width:100%; box-shadow: 1px 1px 1px #cfcfcf; border-radius:10px; color:black; border:1px solid #e5e5e5; min-height: 100px;">Sample Text 1</div>
            </td>
            <td rowspan="5">
                <section class="loginform">
                    <fieldset style="border-radius: 5px; padding: 5px;">
                        <legend>Template</legend>
                        <ul style="padding: 10px;">
                            <li>one</li>
                            <li>Two</li>
                            <li>Three</li>
                            <li>Four</li>
                            <li>Five</li>
                        </ul>
                    </fieldset>
                </section>
            </td>
        </tr>
        <tr>
            <td>val</td>
            <td>
                <div style="width:100%; box-shadow: 1px 1px 1px #cfcfcf; color:black; border:1px solid #e5e5e5; min-height: 80px;">1 Only</div>
            </td>
        </tr>
        <tr>
            <td>bal</td>
            <td>
                <div style="width:100%; box-shadow: 1px 1px 1px #cfcfcf; border-radius:10px; color:black; border:1px solid #e5e5e5; min-height: 80px;">2 only</div>
            </td>
        </tr>
        <tr>
            <td>nal</td>
            <td>
                <div style="width:100%; color:black; box-shadow: 1px 1px 1px #cfcfcf; border-radius:10px; color:black; border:1px solid #e5e5e5; min-height: 80px;">Both 1 and 2</div>
            </td>
        </tr>
        <tr>
            <td>dul</td>
            <td>
                <div style="width:100%; box-shadow: 1px 1px 1px #cfcfcf; border-radius:10px; color:black; border:1px solid #e5e5e5; min-height: 80px;">Neither 1 nor 2</div>
            </td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>    
</html>

在此表中;我想确保模板的高度（右侧的部分）;总是等于表的五个ROWS的高度。如果模板内的数据更多，它应该带有滚动条。但在任何情况下它都不应超过表格的五行高度。你能建议吗？

Answer 1

您必须设置固定的高度。

看看这个： -

http://jsfiddle.net/8tFnG/

<fieldset style="border-radius: 5px; padding: 5px;height: 450px; border: solid 1px red;">

Answer 2

如果您知道左侧五行的高度，则可以使用简单的css规则“限制”“模板”字段集的高度：max-height: 400px; overflow: hidden; overflow-y: scroll;其中400px是五行中的高度桌子;溢出被隐藏，y轴上的溢出被设置为滚动。试试吧：

.loginform fieldset{
    height: 400px;
    max-height: 400px; 
    overflow: hidden;
    overflow-y: scroll;
}

另一种选择是使用JavaScript。您可以找出包含五行的表格的高度，然后调整页面加载时“模板”字段集的高度。

希望这有帮助。

Answer 3

试试这个css：

<style>
    fieldset{ height: 450px;overflow-y:hidden;}
</style>

Answer 4

添加位置：固定到元素

如何限制表行高度

4 个答案: