CSSに関しては一部CSSライブラリを採用しているので併用してください。
またサンプルとしてデモ内でjQueryライブラリのパーツを使用していることがあります。

  • DEMO
  • 縦列タイトル
  • 長文テスト
  • colspan
  • rowspan
名前 名前 名前 名前
項目 1 項目 2 項目 3 項目 4
項目 1 項目 2 項目 3 項目 4
名前 項目 1 項目 2 項目 3 項目 4
名前 項目 1 項目 2 項目 3 項目 4
名前 項目 1 項目 2 項目 3 項目 4
名前 名前 名前 名前
長文テスト 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 項目 3 項目 4
項目 1 項目 2 項目 3 項目 4
名前 名前
項目 1 項目 2 項目 3 項目 4
項目 1 項目 2 項目 3 項目 4
名前 項目 1 項目 2 項目 3 項目 4
項目 1 項目 2 項目 3 項目 4
名前 項目 1 項目 2 項目 3 項目 4
項目 1 項目 2 項目 3 項目 4

使い方

シンプルなテーブル表示。
[colspan]や[rowspan]はそのまま使えます。

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

  • HTML
  • CSS

    

      
        

          
        

      
      
        

          
        

      
    

  
.lo-table {
    border-radius: 10px;
    border: 1px solid var(--line-main);
    background: var(--bg-paper);
    overflow-x: auto;
  }
  .lo-table.fit {width: fit-content;}
  .lt-table {
    width: 100%;
    font-size: var(--typo-min);
    table-layout: fixed;
  }
  .lt-td {
    padding: 12px 16px;
    text-align: left;
  }
  .lo-table .ti {font-weight: bold;}
  .lo-table .right .lt-td ,
  .lt-td.right {text-align: right;}
  .lt-head,
  .lt-tr:not(:last-child) .lt-td {border-bottom: 1px solid var(--line-main);}

右詰め

テキストを右詰めにします

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

  • DEMO
名前 名前 名前 名前 名前
項目 1 168 91 1 53
項目 1 27 910 27 5