絶対に配置されていないオーバーフローを避ける<table>

Question

私の要件として、テーブルの固定ヘッダー/フッターが必要です。 親と一緒にあふれている絶対に配置されたヘッダー/フッターが必要です。

FIDDLE

私は、ラッパーのdivにposition: relative;を適用することで、ヘッダ/フッタはもはや固定されていない、この答えhttps://stackoverflow.com/a/4605809/2968762

次試みたが。

別のラッパー内のコンテンツ全体をラップし、それ固定に次のスタイルを適用する：

Answer 1

感謝を行う必要があり、私は解決策を見つけました問題：

.grand-wrapper { 
    position: relative; 
    overflow: hidden; 
} 

FIDDLE

Answer 2

body { 
 
    height: 50rem; 
 
} 
 
.wrapper { 
 
    margin-top: 10rem; 
 
    max-height: 6.7rem; 
 
    max-width: 12.5rem; 
 
    overflow: scroll; 
 
    table { 
 
    width: 25rem; 
 
    } 
 
} 
 

 
.header, 
 
.footer { 
 
    table { 
 
    position: absolute; 
 
    background: white; 
 
    } 
 
} 
 

 
.footer table { 
 
    bottom: 10.6rem; 
 
} 
 

 
table { 
 
    thead { 
 
    tr { 
 
     th { 
 
     width: 4rem; 
 
     text-align: center; 
 
     } 
 
    } 
 
    } 
 
    tbody { 
 
    tr { 
 
     td { 
 
     width: 4rem; 
 
     text-align: center; 
 
     } 
 
    } 
 
    } 
 
} 
 

 

 
.wrapper .header { 
 
    position: absolute; 
 
    width: 11.5rem; 
 
    overflow: hidden; 
 
    background: white; 
 
    top: 160px; 
 
}

<div class="wrapper"> 
 
    <div class="header"> 
 
    <table> 
 
     <thead> 
 
     <tr> 
 
      <th>Head 1</th> 
 
      <th>Head 2</th> 
 
      <th>Head 3</th> 
 
      <th>Head 4</th> 
 
      <th>Head 5</th> 
 
      <th>Head 6</th> 
 
     </tr> 
 
     </thead> 
 
    </table> 
 
    </div> 
 

 
    <div class="main_body"> 
 
    <table> 
 
     <thead> 
 
     <tr> 
 
      <th>Head 1</th> 
 
      <th>Head 2</th> 
 
      <th>Head 3</th> 
 
      <th>Head 4</th> 
 
      <th>Head 5</th> 
 
      <th>Head 6</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr> 
 
      <td>11</td> 
 
      <td>23</td> 
 
      <td>44</td> 
 
      <td>20</td> 
 
      <td>30</td> 
 
      <td>40</td> 
 
     </tr> 
 
     <tr> 
 
      <td>32</td> 
 
      <td>1</td> 
 
      <td>7</td> 
 
      <td>4</td> 
 
      <td>5</td> 
 
      <td>6</td> 
 
     </tr> 
 
     <tr> 
 
      <td>3</td> 
 
      <td>3</td> 
 
      <td>3</td> 
 
      <td>3</td> 
 
      <td>3</td> 
 
      <td>3</td> 
 
     </tr> 
 
     <tr> 
 
      <td>2</td> 
 
      <td>2</td> 
 
      <td>2</td> 
 
      <td>2</td> 
 
      <td>2</td> 
 
      <td>2</td> 
 
     </tr> 
 
     <tr> 
 
      <td>1</td> 
 
      <td>1</td> 
 
      <td>1</td> 
 
      <td>1</td> 
 
      <td>1</td> 
 
      <td>1</td> 
 
     </tr> 
 
     <tr> 
 
      <td>49</td> 
 
      <td>30</td> 
 
      <td>57</td> 
 
      <td>30</td> 
 
      <td>41</td> 
 
      <td>52</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 

 
    <div class="footer"> 
 
    <table> 
 
     <tbody> 
 
     <tr> 
 
      <td>49</td> 
 
      <td>30</td> 
 
      <td>57</td> 
 
      <td>30</td> 
 
      <td>41</td> 
 
      <td>52</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
</div>

これはトリックにTHIS ARTICLEへ