如何在没有硬编码像素高度的情况下将表格限制在外部字段集中答案

【问题标题】：How to keep table confined with in outer fieldset without hard-coding height in pixels如何在没有硬编码像素高度的情况下将表格限制在外部字段集中
【发布时间】：2014-05-19 23:57:01
【问题描述】：

我的 html 页面有一个字段集，在该 div 中我正在动态呈现一个表格。此表可以只有 1 行或 1000 行。

Outer Div 的高度是 75%，我不想让桌子穿过它。

HTML 代码如下所示

<fieldset>
    <div>Some text and some HTML Elements </div>
    <<h4>Field Permissions </h4>
    <table class="mytable">
        // Dynamically populate rows. Number of rows can be 1 or 100 or 1000
    </table>
</fieldset>

现在，我希望将此表保留在外部字段集中，但它会在整个字段集中呈现过去。

在附图中，带有红色边框的 DOM 元素是表格，带有蓝色边框的是外部字段集。

这是我的 CSS：

.mytable{
    font-size: 12px;
    margin: 10px;
    width: 95%;
    border-spacing: 5px;
    text-align: center;
    position: absolute;
    height: 100%;
}

fieldset {
    margin: 0;
    font-size: 12px;
    overflow-y: auto;
    overflow-x: auto;
    width: 100%;
    height: 100%;
}

【问题讨论】：

你试过了吗：溢出：自动； ?

标签： overflow css-position css-tables fieldset

【解决方案1】：

尝试添加溢出：自动；到字段集

fieldset{
    overflow:auto;
}

【讨论】：

你的意思是字段集导致表格扩展而不滚动
.mytable{ 溢出：自动； } ...我试过了..它不起作用
编辑了我对 Gcyrillus 评论的回答。立即尝试
我们是否有机会获得 jsfiddle 中的代码示例？

【解决方案2】：

啊等等。如果我删除“位置：绝对”并且它可以工作。不过还是谢谢大家的帮助

【讨论】：