fieldset圖例滾動內表

Question

我有一個嵌套在fieldset中的表。當表格超過字段集的高度時，顯示左側滾動條。問題是<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