トップ > Splunk > 【Splunk】ダッシュボードでテーブルの1行目と1列目を固定する

【Splunk】ダッシュボードでテーブルの1行目と1列目を固定する

Splunk

こんにちは。
Splunkコミュニティのこちらの回答を参考にさせていただき、CSSを使ってダッシュボードの1行目と1列目を固定しました。
community.splunk.com

<form>
  <label>テーブル行列固定サンプル</label>
  <fieldset submitButton="false">
    <input type="text" token="height">
      <label>パネルの縦の長さ</label>
      <initialValue>600</initialValue>
    </input>
  </fieldset>
  <row>
    <panel>
      <html>
        <style>
          #sample div [data-view="views/shared/results_table/ResultsTableMaster"]{
            overflow-y: auto;
            height: $height$px;
          }
          
          #sample th {
            position: sticky;
            top: 0;
            text-align: left;
            z-index: 1;
          }
          
          #sample td:nth-child(1) {
            position: sticky;
            left: 0;
            z-index: 2;
          }
            
          #sample th:nth-child(1) {
            top: 0;
            left: 0;
            z-index: 10;
          }
        </style>
      </html>
      <table id="sample">
        <search>
          <query>index=_internal
| table _time index sourcetype source host _raw</query>
          <earliest>-15m</earliest>
          <latest>now</latest>
        </search>
        <option name="count">100</option>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
        <option name="rowNumbers">false</option>
        <option name="wrap">false</option>
      </table>
    </panel>
  </row>
</form>

ついでにパネルの高さも自由に変更可能にしています。
色々数字を入力して丁度いい高さに調整できたら、その値をheight: $height$px;のところにハードコーディングすれば完成です。

CSSは1ミリも知らないので1行ずつ検索しながら書きました。
とくにこちらのサイトにはよくお世話になりました。
CSS&colon; カスケーディングスタイルシート | MDN
ありがとうございます。