[Visualforce SLDS] slds-tableのヘッダーを固定する/Fix header of slds-table

<問題・Problem>

SLDSのTableComponentページhttps://www.lightningdesignsystem.com/components/data-tables/にはヘッダーを固定する方法が書いてありません。
There is no description about fixed header in SLDS TableComponent pagehttps://www.lightningdesignsystem.com/components/data-tables/.

<解決策・Solution>

実は、ヘッダーを固定するクラスがSLDSに用意されているのです！ヘッダー固定はとっても簡単に実装できます！
Actually, there are some classes which can fix table header! It's very easy to implement the feature!

Class:

• slds-table–header-fixed_container
• slds-table--header-fixed
• slds-cell-fixed

<サンプル・Sample>

 <div class="slds-table--header-fixed_container" style="height:300px;">  
   <div class="slds-scrollable_y" style="height:100%;">  
     <table class="slds-table slds-table_bordered slds-table--header-fixed">  
       <thead>  
         <tr class="slds-text-title_caps">  
           <th scope="col">  
             <div class="slds-truncate slds-cell-fixed" style="padding: 8px;" title="Name">  
               Name   
             </div>  
           </th>  
           <th scope="col">  
             <div class="slds-truncate slds-cell-fixed" style="padding: 8px;" title="Amount">  
               Amount  
             </div>  
           </th>  
         </tr>  
       </thead>  
       <tbody >  
         <tr>  
           <th scope="row" data-label="Name">  
             <div class="slds-truncate" title="Pen"><a href="javascript:void(0);">pen</a></div>  
           </th>  
           <td data-label="Amount">  
             <div class="slds-truncate" title="10">10</div>  
           </td>  
         </tr>  
         <tr>  
           <th scope="row" data-label="Name">  
             <div class="slds-truncate" title="Pineapple"><a href="javascript:void(0);">Pineapple</a></div>  
           </th>  
           <td data-label="Amount">  
             <div class="slds-truncate" title="10">20</div>  
           </td>  
         </tr>  
         <tr>  
           <th scope="row" data-label="Name">  
             <div class="slds-truncate" title="Apple"><a href="javascript:void(0);">Apple</a></div>  
           </th>  
           <td data-label="Amount">  
             <div class="slds-truncate" title="10">30</div>  
           </td>  
         </tr>  
         <tr>  
           <th scope="row" data-label="Name">  
             <div class="slds-truncate" title="Pen"><a href="javascript:void(0);">pen</a></div>  
           </th>  
           <td data-label="Amount">  
             <div class="slds-truncate" title="10">10</div>  
           </td>  
         </tr>  
         <tr>  
           <th scope="row" data-label="Name">  
             <div class="slds-truncate" title="Pineapple"><a href="javascript:void(0);">Pineapple</a></div>  
           </th>  
           <td data-label="Amount">  
             <div class="slds-truncate" title="10">20</div>  
           </td>  
         </tr>  
         <tr>  
           <th scope="row" data-label="Name">  
             <div class="slds-truncate" title="Apple"><a href="javascript:void(0);">Apple</a></div>  
           </th>  
           <td data-label="Amount">  
             <div class="slds-truncate" title="10">30</div>  
           </td>  
         </tr>  
         <tr>  
           <th scope="row" data-label="Name">  
             <div class="slds-truncate" title="Pen"><a href="javascript:void(0);">pen</a></div>  
           </th>  
           <td data-label="Amount">  
             <div class="slds-truncate" title="10">10</div>  
           </td>  
         </tr>  
         <tr>  
           <th scope="row" data-label="Name">  
             <div class="slds-truncate" title="Pineapple"><a href="javascript:void(0);">Pineapple</a></div>  
           </th>  
           <td data-label="Amount">  
             <div class="slds-truncate" title="10">20</div>  
           </td>  
         </tr>  
         <tr>  
           <th scope="row" data-label="Name">  
             <div class="slds-truncate" title="Apple"><a href="javascript:void(0);">Apple</a></div>  
           </th>  
           <td data-label="Amount">  
             <div class="slds-truncate" title="10">30</div>  
           </td>  
         </tr>  
         <tr>  
           <th scope="row" data-label="Name">  
             <div class="slds-truncate" title="Pen"><a href="javascript:void(0);">pen</a></div>  
           </th>  
           <td data-label="Amount">  
             <div class="slds-truncate" title="10">10</div>  
           </td>  
         </tr>  
         <tr>  
           <th scope="row" data-label="Name">  
             <div class="slds-truncate" title="Pineapple"><a href="javascript:void(0);">Pineapple</a></div>  
           </th>  
           <td data-label="Amount">  
             <div class="slds-truncate" title="10">20</div>  
           </td>  
         </tr>  
         <tr>  
           <th scope="row" data-label="Name">  
             <div class="slds-truncate" title="Apple"><a href="javascript:void(0);">Apple</a></div>  
           </th>  
           <td data-label="Amount">  
             <div class="slds-truncate" title="10">30</div>  
           </td>  
         </tr>  
         <tr>  
           <th scope="row" data-label="Name">  
             <div class="slds-truncate" title="Pen"><a href="javascript:void(0);">pen</a></div>  
           </th>  
           <td data-label="Amount">  
             <div class="slds-truncate" title="10">10</div>  
           </td>  
         </tr>  
         <tr>  
           <th scope="row" data-label="Name">  
             <div class="slds-truncate" title="Pineapple"><a href="javascript:void(0);">Pineapple</a></div>  
           </th>  
           <td data-label="Amount">  
             <div class="slds-truncate" title="10">20</div>  
           </td>  
         </tr>  
         <tr>  
           <th scope="row" data-label="Name">  
             <div class="slds-truncate" title="Apple"><a href="javascript:void(0);">Apple</a></div>  
           </th>  
           <td data-label="Amount">  
             <div class="slds-truncate" title="10">30</div>  
           </td>  
         </tr>  
       </tbody>  
     </table>  
   </div>  
 </div>