テーブル
シンプル
基本
tableタグに.bl_tableを記述。
trタグに.is_activeで選択状態になります。
＜よく使うヘルパー＞
.hp_textAlign_center
セル内の文字を中央揃えに利用
.hp_whiteSpace_nowrap
改行禁止
| 開催日時 | タイトル | 説明 |
|---|---|---|
| 2023年03月20日 | 講演タイトルが入りますテキストダミー | ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト |
| 2023年03月20日 | 講演タイトルが入りますテキストダミー | ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト |
| 2023年03月20日 | 講演タイトルが入りますテキストダミー | ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト |
| 2023年03月20日 | 講演タイトルが入りますテキストダミー | ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト |
ミニマル
tableタグに.bl_table + .bl_table__minを記述。
セルの余白が狭まったテーブルスタイルになります。
| 開催日時 | タイトル | 説明 |
|---|---|---|
| 2023年03月20日 | 講演タイトルが入りますテキストダミー | ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト |
| 2023年03月20日 | 講演タイトルが入りますテキストダミー | ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト |
| 2023年03月20日 | 講演タイトルが入りますテキストダミー | ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト |
スマホ時 レイアウト：カラム
tableタグに.bl_table + .bl_table__rowを記述。
スマホ幅時にカラムレイアウトに変更します。
data-labelで項目名を設定してください。
.bl_table__row__paddingを追記すると、tdの左右に余白ができます。
| 開催日時 | タイトル | 説明 |
|---|---|---|
| 2023年03月20日 | 講演タイトルが入りますテキストダミー | ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト |
| 2023年03月20日 | 講演タイトルが入りますテキストダミー | ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト |
| 2023年03月20日 | 講演タイトルが入りますテキストダミー | ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト |
データ表示用
データリスト表示用のテーブルです。
項目が多い場合はtable要素を囲うdiv要素に.bl_table_scrollXを記述するとスマホ幅の際に横スクロールします。
| ID | 商品名 | 販売価格 | 在庫数 | ステータス | 更新日 | 操作 | ||
|---|---|---|---|---|---|---|---|---|
| 00001 |  |
商品名がはいりますテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミー | 1,200円 | 120 | check_circle公開中 | 2023/01/01 | ||
| 00001 | |
商品名がはいりますテキストダミーテキストダミー | 1,200円 | 120 | remove_circle非公開 | 2023/01/01 | ||
テーブルのスタイル
テーブルに利用できるスタイル。複数組み合わせることも可能です。
ホバーあり
tableタグに.bl_table_style__hoverを追記。
テーブルの行にホバースタイルを付与します。
| 開催日時 | タイトル | 説明 |
|---|---|---|
| 2023年03月20日 | 講演タイトルが入りますテキストダミー | ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト |
| 2023年03月20日 | 講演タイトルが入りますテキストダミー | ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト |
罫線あり
tableタグに.bl_table_style__borderを追記。
テーブル全体に罫線が入ったスタイルになります。
| 開催日時 | タイトル | 説明 |
|---|---|---|
| 2023年03月20日 | 講演タイトルが入りますテキストダミー | ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト |
| 2023年03月20日 | 講演タイトルが入りますテキストダミー | ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト |
罫線なし
tableタグに.bl_table_style__noBorderを追記。
tr上下の罫線がないスタイルになります。
| 開催日時 | タイトル | 説明 |
|---|---|---|
| 2023年03月20日 | 講演タイトルが入りますテキストダミー | ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト |
| 2023年03月20日 | 講演タイトルが入りますテキストダミー | ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト |
背景色交互
tableタグに.bl_table_style__stripeを追記。
気数行と偶数行で背景色が変わります。
| 開催日時 | タイトル | 説明 |
|---|---|---|
| 2023年03月20日 | 講演タイトルが入りますテキストダミー | ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト |
| 2023年03月20日 | 講演タイトルが入りますテキストダミー | ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト |
均等配置
tableタグに.bl_table_style__layoutFixedを追記。
列幅が均等になります。
| 開催日時 | タイトル | 説明 |
|---|---|---|
| 2023年03月20日 | 講演タイトルが入りますテキストダミー | ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト |
| 2023年03月20日 | 講演タイトルが入りますテキストダミー | ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト |