html - 使用内表滚动的字段集图例

Question

我有一个嵌套在字段集中的表。当表格超过字段集的高度时，将显示左侧滚动条。问题是 <legend>元素将随表格滚动并且不会保持固定。

<fieldset>
  <legend>Header</legend>
  <table>
    <tr>
      <td>Val 1<td>
    </tr>
    <tr>
      <td>Val ....<td>
    </tr>
    .......
  </table>
</fieldset>

fieldset {
    border: 1px solid lightgrey; 
    padding: 20px; 
    border-radius: 8px;
    background: #f9f9f9; 
    padding: 5px;
    height: 280px;
    max-height: 280px;
    vertical-align: top;
    font-size: 11px;
    overflow-y: auto;
}

我怎样才能防止 <legend>与表格一起滚动的元素？

Answer 1

您需要使用不同的包装器。示例:

HTML

 <fieldset>
    <legend>Header</legend>
    <div class="my-overflow">
        <table>
            <tr><td>Val 1</td></tr>
            <tr><td>Val 2</td></tr>
            <tr><td>Val 3</td></tr>
            <tr><td>Val 4</td></tr>
            <tr><td>Val 5</td></tr>
            <tr><td>Val 6</td></tr>
        </table>
    </div>
</fieldset>

CSS

fieldset {
    border: 1px solid lightgrey;
    padding: 20px;
    border-radius: 8px;
    background: #f9f9f9;
    padding: 5px;
    vertical-align: top;
    font-size: 11px;
}
.my-overflow {
    overflow-y: auto;
    height: 50px;
    max-height: 50px;
}

演示: jsFiddle