表の仕様を再検討中(2020秋改訂)

   

スポンサーリンク

2020春

標準コンテナに入れることを想定(フレックスの中央寄せ)。幅は未設定左右のマージンを画面vwに応じて変化させる(N-boxのパディングと同数値)。フォントの大きさも画面vwに応じて変化させる(N-boxよりも傾きを大きく切片を小さく)

 

2020晩秋

デフォルトのテーブル

角丸、幅の調整、フォントの調整を行った状態

1 2 3 4
A A1 A2 A3 A4
B B1 B2 B3 B4

 

カスタムテーブル

CSSで「D-tbl1」を設定。

行に上下のボーダーのみ設定。はじめの行とおわりの行はボーダーを調整

奇数行(nth-of-type(2n+1))の背景とボーダー色を変える。はじめの行はさらに背景とボーダー色を変える。

セル(td,th)のボーダーをクリア。左右のみにボーダーを設定して、左右両端のセルはボーダーを調整

配置した例

主格
(~が)
所有格
(~の)
目的格
(~を)
所有代名詞
(~のもの)
I
(アイ)
my
(マイ)
me
(ミー)
mine
(マイン)
あなた You
(ユー)
your
(ユア)
you
(ユー)
yours
(ユアーズ)
He
(ヒー)
his
(ヒズ)
him
(ヒム)
his
(ヒズ)
彼女 She
(シー)
her
(ハー)
her
(ハー)
hers
(ハーズ)

後置の文章。後置の文章。後置の文章。後置の文章。後置の文章。後置の文章。

ハイライトしたい行にはクラス「Hi」設定(奇数処理は自動で)。2行目と3行目にハイライトを設定している。

主格
(~が)
所有格
(~の)
目的格
(~を)
所有代名詞
(~のもの)
I
(アイ)
my
(マイ)
me
(ミー)
mine
(マイン)
あなた You
(ユー)
your
(ユア)
you
(ユー)
yours
(ユアーズ)
He
(ヒー)
his
(ヒズ)
him
(ヒム)
his
(ヒズ)
彼女 She
(シー)
her
(ハー)
her
(ハー)
hers
(ハーズ)

イイネイイネ!

チョーキレイダ♪

 

タイトルとURLをコピーしました