簡単にアレンジできるtableのHTMLとCSS

レスポンシブ対応するようになった今でも、tableでの表組はよく使われます。
そこで、コーディングする際に簡単にアレンジできるコードのサンプルを作りました。

各ブレイクポイントでブロック表示に切り替わります。
ブレイクポイントは、bootstrapのグリッドシステムに準じます。

使用するclass名

.borderBox:囲み罫線
.borderHorizon:上下罫線

.borderSolid:実線罫線
.borderDashed:破線罫線
.borderDotted:点線罫線

.xs-block:xs以下でブロック表示に切り替える
.sm-block:sm以下でブロック表示に切り替える
.md-block:md以下でブロック表示に切り替える
.lg-block:lg以下でブロック表示に切り替える

.cell-xs-create:xs以下で左側に見出しセルを追加する(tdのtitle属性を反映、.xs-blockを併用)
.cell-sm-create::sm以下で左側に見出しセルを追加する(tdのtitle属性を反映、.sm-blockを併用)
.cell-md-create::md以下で左側に見出しセルを追加する(tdのtitle属性を反映、.md-blockを併用)
.cell-lg-create::lg以下で左側に見出しセルを追加する(tdのtitle属性を反映、.lg-blockを併用)

View

thtdtd
thtdtd

thtdtd
thtdtd

thtdtd
thtdtd

thth
tdtd

thth
tdtd

Source

Comments are closed.