Table Fit

横線や内容幅合わせが可能なTable。

詳しい導入事例は導入方法を参照してください。

専用設計ではなくライブラリーを複数組み合わせているため、デモ版ではタブ切替のタイミングでガタつきます。
きれいに表示しようとすると別設計のマークアップに影響が出るため、このページでは無理やり対応しています。

DEMO
縦列タイトル
長文テスト

名前	名前	名前	名前
項目 1	項目 2	項目 3	項目 4

名前	名前	名前	名前
項目 1	項目 2	項目 3	項目 4

名前	項目 1	項目 2
名前	長文テスト Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.	項目 2
名前	項目 1	項目 2

使い方

HTMLは*-table-*で記述していますが、*-tr-*をflex化してを*-td-*に横線を追加し、JSで*-td-*の横幅を内容幅合わせにしています。

*-thead-*,*-tbody-*,*-th-*,*-td-*などの要素に+-.right-+のクラス追加で[text-align: right]、+-.ti-+のクラス追加で[font-weight: bold]が付与されます。

flex化しているので[colspan]や[rowspan]は使用できません。

HTML
CSS
Script

.lo-table {
    border-radius: var(--radius-xm);
    border: 1px solid var(--line-main);
    background: var(--bg-paper);
    overflow-x: auto;
  }
  .lo-table {
    border-radius: var(--radius-xm);
    border: 1px solid var(--line-main);
    background: var(--bg-paper);
    overflow: auto;
  }
  .ltf-table {
    width: 100%;
    font-size: var(--typo-min);
    table-layout: auto;
  }
  .ltf-tr {
    padding: 12px 0;
    display: flex;
  }
  .ltf-tr:not(:last-child) {border-bottom: 1px solid var(--line-main);}
  .ltf-td {
    padding: 0 24px;
    text-align: left;
  }
  .ltf-td:not(:first-child) {border-left: 1px solid var(--line-main);}
  .full .ltf-td {
    width: auto !important;
    flex: 1;
  } 
  .ltf-td.right {
    margin-left: auto;
    padding: 0 16px;
  }
  .lo-table .ltf-td .btn {
    width: 26px;
    height: 26px;
  }
  .lo-table .btn {color: inherit;}
  .lo-table .btn:hover {background: var(--hover);}

function lo_tableFit(){
    $('.lo-table').each(function(){
      if($(this).is(':hidden')){return true;}
      let $td = $('.ltf-td',this);
      $td.removeAttr('style');
  
      let leng = $('.ltf-tr:first-child',this).children('.ltf-td').length;
      for(let i = 0; i < leng+1; i++){
        let wList = new Array();
        $(this).find('.ltf-td:nth-child('+i+')').each(function(is){
          wList[is] =  $(this).width()+1;
        });
        let maxW = Math.max.apply(null, wList);
        $(this).find('.ltf-td:nth-child('+i+')').css({'width':maxW+'px'});
      }
    
      let tw = $(this).parent().width();
      let sw = $('.ltf-tr',this).get(0).scrollWidth;
      if(tw < sw){
        let wLists = new Array();
        $td.each(function(i){
          wLists[i] = $(this).width();
        });
        let maxW = Math.max.apply(null, wLists);
        let ss = sw-tw;
        $td.css({'max-width':maxW - ss+'px'});
      }
    });
  }
  lo_tableFit();

横幅設定

横幅計算時にに小数点以下の判定はなくして+1pxにしているのでピッタリ合わせようとするとズレる可能性があるので注意してください。
JSは+-lo_tableFit();-+の関数で実行しています。
上部のデモのように初期非表示の場合は横幅を取得できず崩れてしまうので、表示とともに関数を実行しましょう。

横幅指定

横幅を指定したい場合は個別の専用のCSSを書くか[width=""]属性で指定してください。
横paddingが左右で48pxあるので、その分指定サイズより大きくなるので注意してください。

均等幅

+-.lo-table-+に[full]のクラスを追加で、+-td.ltf-td-+に{flex: 1;}が付与されて横幅を均等にします。

テーブルを内容幅合わせ

+-.lo-table-+に+-.fit-+のクラスを追加で、テーブル自体が内容幅合わせになります。

均等幅やテーブルを内容幅合わせにする場合はシンプルなテーブル表示を推薦。
違いは*-td-*の横線の有無。

横幅指定
均等幅
テーブルを内容幅合わせ

名前	項目 1	項目 2
名前	横幅指定: 200px / Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.	項目 2
名前	項目 1	項目 2

名前	項目 1	項目 2	項目 3
名前	項目 1	項目 2	項目 3
名前	項目 1	項目 2	項目 3

名前	項目 1	項目 2	項目 3
名前	項目 1	項目 2	項目 3
名前	項目 1	項目 2	項目 3

右端設置

最右の項目を右端に設置

右端設置

名前	名前	名前
項目 1	項目 2	項目 3

edit編集
delete削除

最後の+-td.ltf-td-+に[action]のクラスを追加で、{margin-left: auto}が付与されて右端に設置されます。