Skip to content
Lism CSS

Table

This content is not available in your language yet.

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

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

Create Component

Section titled “Create Component”

Table(.c--table)というコンポーネントを作って利用する例を紹介していきます。

Source Code

Section titled “Source Code”
ソースコードを手動でコピー&ペーストしてご利用ください。

Import

Section titled “Import”
 import jsx 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-fix1st
  • theadを固定するc--table-fixHead
↓
scroll時にtheadと、1列目のセルを固定する例
Header 1Header 2Header 3Header 3Header 3Header 3
Cell 1-1Cell 1-2
Lorem ipsum text		Cell 1-3Cell 1-4Cell 1-5
Lorem ipsum text		Cell 1-6
Cell 2-1Cell 2-2Cell 2-3
Lorem ipsum text		Cell 2-4Cell 2-5Cell 2-6
Lorem ipsum text
Cell 3-2Cell 3-3Cell 3-4
Lorem ipsum text		Cell 3-5Cell 3-6
Cell 4-1Cell 4-2
Lorem ipsum text		Cell 4-3Cell 4-4Cell 4-5
Lorem ipsum text		Cell 4-6
Cell 5-1Cell 5-2Cell 5-3
Lorem ipsum text		Cell 5-4Cell 5-5Cell 5-6
Lorem ipsum text
Cell 6-1Cell 6-2Cell 6-3Cell 6-4
Lorem ipsum text		Cell 6-5Cell 6-6
<Frame ov='auto' maxH='20rem'>
  <Table variant='fix1st,fixHead' thBgc='base-2' cellMinW='10rem'>
    <thead>...</thead>
    <tbody>...</tbody>
    <tfoot>...</tfoot>
  </Table>
</Frame>