GUST NOTCH? DIARY

CSSのお勉強 その2

昨日の続き。
table の扱いは2つのパターンで対応することにした。
HTML上は大画面用に table で書いておく。
1つ目は、thead 要素の部分は表示せず、tbody の th, td を block 要素にすることで縦に並べる。必要に応じて、消した thead の th の内容を td:before の contents として補完する。
2つ目は、ビジュアルはそのままに幅を固定して作成しておき、はみ出した分は横にスクロールできるようにする。
コンテンツの見た目は決まったので、後はメニューによるナビゲーションの切り替え。