如何在特定内容上应用CSS溢出属性

Question

我正在为<form>应用溢出属性，使用的形式是<legend> 。 这里的溢出适用于整个表单，因此如果需要溢出，滚动条也将包括图例。 但我希望除了图例标记以外，必须应用溢出。 我的意思是在形式上加上传说中我使用的桌子。 我希望溢出仅适用于表。

这是我的小提琴，

http://jsfiddle.net/raghavendram040/z6jRX/1/

我的html是

<form>
<fieldset>
<legend>&nbsp;&nbsp;&nbsp;Menu</legend>
<table id="tab">
    <tr>
        <td>abc</td>
    </tr>
    <tr>
        <td>abc</td>
    </tr>
    <tr>
        <td>abc</td>
    </tr>
    <tr>
        <td>abc</td>
    </tr>
    <tr>
        <td>abc</td>
    </tr>
    <tr>
        <td>abc</td>
    </tr>
    <tr>
        <td>abc</td>
    </tr>
    <tr>
        <td>abc</td>
    </tr>
    <tr>
        <td>abc</td>
    </tr>
    <tr>
        <td>abc</td>
    </tr>
    <tr>
        <td>abc</td>
    </tr>
    </table>
</fieldset>

我的CSS是

form{
  border: 1px #6A6A45 solid;
  border-radius:6px;
  height: 200px;
  overflow: auto;
  background-color:#efefef ;
  margin-bottom: 17px;

}

应用溢出我尝试过这样，但没有成功

#tab{ overlow: auto }

我该如何解决呢？有人可以帮助我吗？

Answer 1

将表格包装在div并对其应用溢出。

小提琴！

HTML

<form>
<fieldset>
    <legend>&nbsp;&nbsp;&nbsp;Menu</legend>
    <div id="scroll">
        <table id="tab">
            <tr>
                <td>abc</td>
            </tr>
          ...
        </table>
    </div>
</fieldset>
</form>

CSS

#scroll {
    overflow: scroll;
    height: 140px;
}

Answer 2

您可以使用div元素包装表格：

工作演示

<div id="tab">
    <table>
    </table>
</div>