- 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]が付与されます。
.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]が付与されます。
名前 |
名前 |
名前 |
名前 |
名前 |
項目 1 |
168 |
91 |
1 |
53 |
項目 1 |
27 |
910 |
27 |
5 |