Table

テーブルデザイン

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

  • Col title
  • Row title
  • colspan
  • rowspan
  • 右詰め
  • 長文テスト
名前 名前 名前 名前
項目 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
名前 項目 1 項目 2 項目 3 項目 4
項目 1 項目 2 項目 3 項目 4
名前 項目 1 項目 2 項目 3 項目 4
項目 1 項目 2 項目 3 項目 4
名前 名前 名前 名前 名前
項目 1 168 91 1 53
項目 1 27 910 27 5
名前 名前 名前 名前
長文テスト 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

使い方

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

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

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

  • HTML
  • CSS

    

      
        

          
        

      
      
        

          
        

      
    

  
.mod_table {
  border-radius: var(--radius-xm);
  border: 1px solid var(--line-main);
  background: var(--bg-paper);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.mod_table-tb {
  width: 100%;
  font-size: var(--typo-min);
  table-layout: fixed;
}
.mod_table-td {
  padding: 12px 16px;
  text-align: left;
}
.mod_table .ti {font-weight: bold;}
.mod_table .right .mod_table-td ,
.mod_table-td.right {text-align: right;}
.mod_table-head,.mod_table-tr:not(:last-child) {border-bottom: 1px solid var(--line-main);}
@media (770px >= width) {
  .mod_table-tb {
    width: auto;
    table-layout: fixed;
    -webkit-text-size-adjust: 100%;
  }
  .mod_table-td {white-space: nowrap;}
}