@charset "UTF-8";
/**
 * テーブル css
 * @version 23.05.26
 * @version 24.07.02 dvh対応
 * @version 25.12.11 論理削除行を追加
 */

/*
一覧用:table.list-tbl.stripe ※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;
 --even-bgcolor: #eaf3fb; /* #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><a data-sort="sort_fuga" class="sort asc">ソートあり</a></th> ※ソートさせる場合
          <th>BBB</th>
          <th>CCCC</th>
        </tr>
      </thead>
      <tbody class="list"> ※ソートさせる場合class="list"
        <tr>
          <td class="sort_fuga">ソート列...</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>
*/

/* ソート */
:is(.list-box, .list-tbl:not(.no-sort)) .sort {
  cursor: pointer; border-bottom: 1px dotted transparent;
  -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
:is(.list-box, .list-tbl:not(.no-sort)) .sort:hover { text-decoration: none; border-bottom-color: unset; }
:is(.list-box, .list-tbl:not(.no-sort)) .sort::after { content: '\f0dc'; font-family: 'Font Awesome 5 Free'; font-weight: 900; margin-left: 0.2em; }
:is(.list-box, .list-tbl:not(.no-sort)) .sort:empty::after { margin-left: 0; }
:is(.list-box, .list-tbl:not(.no-sort)) .sort.asc::after { content: '\f0de'; }
:is(.list-box, .list-tbl:not(.no-sort)) .sort.desc::after { content: '\f0dd'; }

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: 2px 4px; }
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; }
table thead :is(a, span) { vertical-align: baseline; }
/*
「border-collapse: separate;」にしないと内側が丸くなるだけで罫線に影響なし
※border-collapse: separate;だと罫線が太く見えるので却下
table tr:last-of-type td:first-of-type { border-radius: 0 0 0 8px; }
table tr:last-of-type td:last-of-type { 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: normal; }
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: normal; }

/* ストライプの色 classでodd／even指定したほうが強い */
table.stripe tr:nth-of-type(odd) td { background-color: var(--odd-bgcolor); }
table.stripe tr:nth-of-type(even) td { background-color: var(--even-bgcolor); }
table.stripe tr:nth-of-type(even).odd td { background-color: var(--odd-bgcolor); }
table.stripe tr:nth-of-type(odd).even td { background-color: var(--even-bgcolor); }
/* ストライプ ＞ ホバー時の色 */
table:is(.list-tbl, .stripe) :is(tr:nth-of-type(odd), tr:nth-of-type(even)):hover td,
table.stripe :is(tr:nth-of-type(odd).odd, tr:nth-of-type(odd).even, tr:nth-of-type(even).even, tr:nth-of-type(even).odd):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; }

table.list-tbl tr.del-row { position: relative; }
table.list-tbl tr.del-row td:first-of-type::before { content: ''; position: absolute; z-index: 1; left: 0; right: 0; top: 0; bottom: 0; background-color: rgb(0 0 0 / 40%); pointer-events: none; }

/* ヘッダー固定 */
.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-of-type td { border-bottom: none; }
.list-box .tbl-outer > table > thead { display: none; }
/* .list-box .tbl-outer table tr td:first-of-type { 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;
}

/* データなし */
.list-box[data-empty-ttl]:not(:has(tbody tr)) table { display: none; }
.list-box[data-empty-ttl]:not(:has(tbody tr))::before { content: attr(data-empty-ttl)'は、ありません。'; }
:is(ul, ol)[data-empty-ttl]:not(:has(li))::before { content: attr(data-empty-ttl)'は、ありません。'; }

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