テーブル レスポンシブ table CSS HTML

//PCのデフォルトスタイルは割愛します .tbl-r05 td:first-child { background: #fbf5f5; } @media screen and (max-width: 640px) { .tbl-r05 { width: 80%; } .tbl-r05 .thead { display: none; } .tbl-r05 tr { width: 100%; } .tbl-r05 td { display: block; text-align: right; width: 100%; } .tbl-r05 td:first-child { background: #e9727e; color: #fff; font-weight: bold; text-align: center; } .tbl-r05 td:before { content: attr(data-label); float: left; font-weight: bold; margin-right: 10px; } }

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

デモ
見出し01(th)見出し02(th)見出し03(th)見出し04(th)
A内容(コンテンツ)内容(コンテンツ)内容(コンテンツ)内容(コンテンツ)
B内容(コンテンツ)内容(コンテンツ)内容(コンテンツ)内容(コンテンツ)
C内容(コンテンツ)内容(コンテンツ)内容(コンテンツ)内容(コンテンツ)
D内容(コンテンツ)内容(コンテンツ)内容(コンテンツ)内容(コンテンツ)
https://b-risk.jp/blog/2018/07/table-css/
Share on facebook
Facebook
Share on google
Google+
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on pinterest
Pinterest

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

sixteen − 6 =