@charset "UTF-8";
/**
 * テーブル css
 * @version 23.05.26
 * @version 24.07.02 dvh対応
 */

/*
一覧用:table.list-tbl.no-stripe
一覧用(ストライプ無し):table.list-tbl.no-stripe
入力用:table.inpt-tbl
*/

:root {
 --hover-color: #e3feda; /*e3feda  d9d9ff  f0f8ff*/
 --tbl-br-color: #e5e5e5;
 --tbl-br: 1px solid var(--tbl-br-color);
 --odd-bgcolor: #fff;
 --evn-bgcolor: #eee;
 --tbl-hd-bgcolor: var(--pri);
 --tbl-hd-color: #fff;
}

/*
[一覧用 HTML例]
<div class="list-box">
  ※ここに固定ヘッダーが作られる
  <div class="tbl-outer init-bottom">  ※init-bottom最終行にスクロールした状態で初期表示
    <table class="list-tbl">
      <colgroup>
        <col class="col_aaa" />
        <col class="col_bbb" />
        <col class="col_ccc" />
      </colgroup>
      <thead>
        <tr>
          <th data-sort="sortFuga" class="sort asc"><label>ソートあり</label></th> ※ソートさせる場合
          <th>BBB</th>
          <th>CCCC</th>
        </tr>
      </thead>
      <tbody class="list"> ※ソートさせる場合class="list"
        <tr>
          <td class="sortFuga">ソート列...</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

[フィルター機能をつける場合 HTML例]
<div class="filter-wrap">
  <div class="filter-inp-box"><!-- 絞込み入力部分 -->
    <input type="text" data-ftarget="aaa" />
    <input type="radio" name="hoge" data-ftarget="bbb" value="A" />
    <input type="radio" name="hoge" data-ftarget="bbb" value="B" />
    <input type="checkbox" data-ftarget="ccc" value="あ" />
    <input type="checkbox" data-ftarget="ccc" value="か" />
    <input type="number" data-ftarget="ppp" data-frange="g" />～<input type="number" data-ftarget="ppp" data-frange="l" />
  </div>
＊data-ftarget="フィルター対象"
＊data-frange="g" g=以上 e=同じ l=以下 属性なし=部分一致 ※g,l=AND検索 e,なし=OR検索

  ※ここにテーブルのHTML
  <tbody class="filter-data-box">class="filter-data-box"を付与=絞込み対象
    <tr>
      <td data-ftarget="aaa">いろは...data-ftargetのタグ直下で絞り込みする例
      <td><input data-ftarget="bbb" value="AAA"...data-ftargetを指定したタグ内のvalueで絞り込みする例

[ドラッグアンドドロップによる並替えの実装例]
<tbody class="sort-tgt">
  <tr>
    <td class="dd-viewclm">D&D中に表示される列</td>
    <td>D&D中は非表示</td>
*/

/* ソート用 */
.list-tbl:not(.no-sort) .sort, .list-tbl:not(.no-sort) .sort label, .list-box:not(.no-sort) .sort, .list-box:not(.no-sort) .sort label { cursor: pointer; }
.list-tbl:not(.no-sort) .sort:hover label, .list-box:not(.no-sort) .sort:hover label { border-bottom: 1px dotted #fff;  }
.list-tbl:not(.no-sort) .sort::after, .list-box:not(.no-sort) .sort::after { content: "\f0dc"; margin-left: 0.3em; margin-right: 0; font-weight: 900; font-family: "Font Awesome 5 Free"; }
.list-tbl:not(.no-sort) .sort:empty:after, .list-box:not(.no-sort) .sort:empty::after { margin-left: 0; }
.list-tbl:not(.no-sort) .sort.asc::after, .list-box:not(.no-sort) .sort.asc::after { content: "\f0de"; }
.list-tbl:not(.no-sort) .sort.desc::after, .list-box:not(.no-sort) .sort.desc::after { content: "\f0dd"; }
.list-tbl:not(.no-sort) .sort.asc label, .list-tbl:not(.no-sort) .sort.desc label, .list-box:not(.no-sort) .sort.asc label, .list-box:not(.no-sort) .sort.desc label { border-bottom: 1px dotted #fff; }

table { display: table; background-color: transparent; border-collapse: collapse; border-spacing: 0; width: 100%; border-radius: 8px; border: none; }
table.bg-fff { background-color: #fff; }
.tbl-outer > table { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }

table thead th { border-top: none; padding: 8px; }
table tr td { padding: 2px 4px; border: var(--tbl-br); }
table tr td.td-fs-0 { font-size: 0; }
table tr td.fd-fs-0 * { font-size: unset; }
table tr th { border-left: var(--tbl-br); }
table tr th:first-of-type { border-left-color: transparent; }
table tr th:last-of-type { border-right-color: transparent; }
table thead tr:first-of-type th:first-of-type { border-top-left-radius: 8px; }
table thead tr:first-of-type th:last-of-type { border-top-right-radius: 8px; }
/*
「border-collapse: separate;」にしないと内側が丸くなるだけで罫線に影響なし
※border-collapse: separate;だと罫線が太く見えるので却下
table tr:last-child td:first-child { border-radius: 0 0 0 8px; }
table tr:last-child td:last-child { border-radius: 0 0 8px 0; }
*/

table.inpt-tbl tr th, table.inpt-tbl tr td { padding: 8px 4px; }
table.inpt-tbl tr th, table.inpt-tbl tr th div { text-align: right; font-weight: bold; }
table.inpt-tbl tr td { border: none; }

table.inpt-tbl, table.list-tbl, table.tbl-th { table-layout: fixed; }
table.list-tbl tr th, table.tbl-th tr th { text-align: center; vertical-align: middle; background-color: var(--tbl-hd-bgcolor); color: var(--tbl-hd-color); font-weight: bold; }
table .thstyle, table.list-tbl  tr td.thstyle { border-left: 1px solid transparent; vertical-align: middle; background-color: var(--tbl-hd-bgcolor); color: var(--tbl-hd-color); font-weight: bold; }

/* ストライプ・ホバー時の色 */
table.list-tbl:not(.no-stripe) tr:nth-child(odd) td, table.list-tbl:not(.no-stripe) tr:nth-child(even).odd td { background-color: var(--odd-bgcolor); }
table.list-tbl:not(.no-stripe) tr:nth-child(even) td, table.list-tbl:not(.no-stripe) tr:nth-child(odd).even td { background-color: var(--evn-bgcolor); }
table.list-tbl tr:hover td, table.list-tbl tr.odd:hover td, table.list-tbl tr.even:hover td,
table.list-tbl:not(.no-stripe) tr:hover td, table.list-tbl:not(.no-stripe) tr.odd:hover td, table.list-tbl:not(.no-stripe) tr.even:hover td { background-color: var(--hover-color); }

table.list-tbl input,
table.list-tbl select,
table.list-tbl textarea
 { background-color: transparent; }

table.list-tbl tr td input { padding: 2px; }
table.list-tbl tr td select { padding: 0 2px; min-height: 22px; }

/* ヘッダー固定 */
.list-box .tbl-outer {
 -ms-overflow-style: none;
 scrollbar-width: none;
 max-height: calc(100vh - 50px); max-height: calc(100dvh - 50px);
 border-bottom: var(--tbl-br);
 width: fit-content;
}
.list-box .tbl-outer::-webkit-scrollbar { display: none; } /* 2022-02-08:WindowsでもChrome97からは要素内のスクロールバーは非表示となった、今後は他ブラウザでも不要になるかも */
.list-box table tr:last-child td { border-bottom: none; }
.list-box .tbl-outer > table > thead { display: none; }
/* .list-box .tbl-outer table tr td:first-child { border-left: 1px solid transparent; } */

/* D&D並び替え中は指定項目以外は非表示 */
.ui-sortable-handle[style*="position"] td:not(.dd-viewclm) {
  display: none;
}
.ui-sortable-handle[style*="position"] td.dd-viewclm {
  border: none;
  padding: 8px 12px;
}

/* 絞り込みフラッシュ @see _basic.css#flsh0 2025-11-18:なぜスマホだとopacity0のままになってしまうのでPC限定 */
@media screen and (min-width: 1051px) {
  .filterFlash { animation: flsh0 0.1s ease; }
}