縦に積むテーブルレスポンシブ

見出し01(th) 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ)
見出し01(th) 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ)
見出し01(th) 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ)

横並びを縦並びにするテーブルレスポンシブ

見出し01(th) 見出し02(th) 見出し03(th) 見出し04(th)
内容(コンテンツ)上 内容(コンテンツ)上 内容(コンテンツ)上 内容(コンテンツ)上
内容(コンテンツ)下 内容(コンテンツ)下 内容(コンテンツ)下 内容(コンテンツ)下

疑似要素で見出しを用意するテーブルレスポンシブ

項目タイトル 項目タイトル 項目タイトル 項目タイトル
A 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ)
B 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ)
C 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ)
D 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ)

content:attr() で見出しを表現するテーブルレスポンシブ

見出し01(th) 見出し02(th) 見出し03(th) 見出し04(th)
A 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ)
B 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ)
C 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ)
D 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ)

spanで見出しを表現するテーブルレスポンシブ

見出し01(th) 見出し02(th) 見出し03(th) 見出し04(th)
見出し01:内容(コンテンツ) 見出し02:内容(コンテンツ) 見出し03:内容(コンテンツ) 見出し04:内容(コンテンツ)内容(コンテンツ)
見出し01:内容(コンテンツ) 見出し02:内容(コンテンツ) 見出し03:内容(コンテンツ) 見出し04:内容(コンテンツ)内容(コンテンツ)
見出し01:内容(コンテンツ) 見出し02:内容(コンテンツ) 見出し03:内容(コンテンツ) 見出し04:内容(コンテンツ)内容(コンテンツ)
見出し01:内容(コンテンツ) 見出し02:内容(コンテンツ) 見出し03:内容(コンテンツ) 見出し04:内容(コンテンツ)内容(コンテンツ)

スクロールで表示させるテーブルレスポンシブ

見出し01(th) 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ)
見出し02(th) 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ)
見出し03(th) 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ)

セル間のマージン

見出し01(th) 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ)
見出し01(th) 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ)
見出し01(th) 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ)
見出し01(th) 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ)
見出し01(th) 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ)
見出し01(th) 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ)