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

字段集图例使用内部表滚动

1 个答案: