Смещение прокрутки в стиле листа с внутренней таблицей

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