コンテンツにスキップ
Lism CSS

Table

1行目・一列目を固定表示することにも対応させた、汎用的なTableレイアウトの作成例です。

変数でボーダースタイルを調整できるようにしておくことで、固定表示に対応できるように設計しています。

Import

Section titled “Import”
ソースコードを手動でコピー&ペーストしてご利用ください。 
 import Table from '@/components/lism/Table/index.jsx';

Usage

Section titled “Usage”
↓
Preview
Header 1Header 2Header 3Header 4
Cell 1Cell 2Cell 3Cell 4
Cell 2-1Cell 2-2Cell 2-3Cell 2-4
Cell 3-1Cell 3-2Cell 3-3Cell 3-4
Footer 1Footer 2Footer 3Footer 4
<Table>
  <caption>Caption</caption>
  <thead>...</thead>
  <tbody>...</tbody>
  <tfoot>...</tfoot>
</Table>
↓
—bdwXで左右のボーダーをなくし、thのカラーリングを指定する例
Header 1Header 2Header 3Header 4
Cell 1Cell 2Cell 3Cell 4
Cell 2-1Cell 2-2Cell 2-3Cell 2-4
Cell 3-1Cell 3-2Cell 3-3Cell 3-4
Footer 1Footer 2Footer 3Footer 4
<Table thBgc='base-2' bdwX='1px'>
  <thead>...</thead>
  <tbody>...</tbody>
  <tfoot>...</tfoot>
</Table>

スクロール時の固定表示

Section titled “スクロール時の固定表示”

以下のような2つのバリエーションクラスをこの例では定義しています。

  • セル１列目を固定するc--table--fix1stCell
  • theadを固定するc--table--fixHead
↓
scroll時にtheadと、1列目のセルを固定する例
Header 1Header 2Header 3Header 3Header 3Header 3
Cell 1Cell 2Cell 3Cell 4Cell 2Cell 3
Cell 1Cell 2Cell 3
text		Cell 4Cell 2Cell 3
text
Cell 2…Cell 4Cell 2…
Cell 1Cell 2Cell 3
text		Cell 4Cell 2Cell 3
text
Cell 1Cell 2…Cell 4Cell 2…
Cell 1Cell 2…Cell 4Cell 2Cell 3
text
<Frame ov='auto' maxH='20rem'>
  <Table variant='fix1stCell,fixHead' thBgc='base-2' style={{'--cell-minIs':'10rem','--bdwwX': '1px'}}>
    <thead>...</thead>
    <tbody>...</tbody>
    <tfoot>...</tfoot>
  </Table>
</Frame>