Salesforce:Lightning tableのヘッダを固定する

以前のVisualforceではtableタグのヘッダ固定は、JavaScriptやスタイルシートで自前で設定してきました。
ですが、Lightning Componentのスタイルシート(すなわち、SLDSのCSS)ではあらかじめヘッダ固定用のスタイルが定義されています。
※今のVisualforceではSLDSのタグを使えるので、Lightning Componentと同様にヘッダが固定できます。(こちらのサイトにサンプルがありました)

これを使うと簡単にヘッダ固定の次のようなtableが作れます。

ポイントですが、下記のソース中に青文字にしています。

<div class="slds-table--header-fixed_container slds-color__border_gray-5" style="height:300px; border-style:solid;border-width:1px;">
  <div class="slds-scrollable_y" style="height:100%;">
    <table class="slds-table slds-table_bordered slds-table--header-fixed slds-table_cell-buffer">
      <thead>
        <tr class="slds-text-title_caps">
          <th><div class="slds-cell-fixed" title="取引先名">取引先名</div></th>
          <th><div class="slds-cell-fixed" title="業種">業種</div></th>
          <th><div class="slds-cell-fixed" title="国(請求先)">国</div></th>
          <th><div class="slds-cell-fixed" title="都道府県(請求先)">都道府県</div></th>
          <th><div class="slds-cell-fixed" title="市区郡(請求先)">市区郡</div></th>
          <th><div class="slds-cell-fixed" title="町名・番地(請求先)">町名・番地</div></th>
          <th><div class="slds-cell-fixed" title="郵便番号(請求先)">郵便番号</div></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><div class="slds-truncate" title="Pyramid Construction Inc.">Pyramid Construction Inc.</div></td>
          <td><div class="slds-truncate" title="Construction">Construction</div></td>
          <td><div class="slds-truncate" title="USA">USA</div></td>
          <td><div class="slds-truncate" title="CA">CA</div></td>
          <td><div class="slds-truncate" title="San Francisco">San Francisco</div></td>
          <td><div class="slds-truncate" title="The Landmark @ One Market">The Landmark @ One Market</div></td>
          <td><div class="slds-truncate" title="75251">75251</div></td>
        </tr>
        <!-- 以下trタグを繰り返し  -->
      </tbody>
    </table>
  </div>
</div>

上記のように、タグとCSSを指定することでヘッダ固定が簡単にできます。
簡単にできる分、手を加えるのが難しそうです。

以下自分で試してみてできなかったこと（ホントはできるのかもしれません）

• ヘッダを1行ではなくて、複数行で固定する
• ヘッダの色を変更する（きっとできるんでしょうけど。。）
• 列も固定

最後に

上記のタグを使って書くと、ヘッダは淡いグレーになります。
白の背景色にヘッダ固定のtableを配置すると、ヘッダの色の境目があいまいになってしまうため枠線を指定しています。（ソース内で緑色にした所です）

多少タグやスタイルを書くだけでヘッダ固定できてしまうのは便利です。列の固定は難しそうですが、あえて固定にこだわらなくても、title属性を使って行にホバーさせれば必要な情報が出るというような対応も取れそうだなと思いました。

<-- 行のタイトルをつけるサンプル  trの中のタグにtitleを付けるとtitleの表示は上書きされます -->
<tr title="固定タイトル">
  <td><div class="slds-truncate">Pyramid Construction Inc.</div></td>
  <td><div class="slds-truncate">Construction</div></td>
  <td><div class="slds-truncate">USA</div></td>
  <td><div class="slds-truncate">CA</div></td>
  <td><div class="slds-truncate">San Francisco</div></td>
  <td><div class="slds-truncate">The Landmark @ One Market</div></td>
  <td><div class="slds-truncate">75251</div></td>
</tr>