スマホ用としてのCSSテーブルをヘッダが縦と横のテーブル別に使い分ける

ヘッダが縦のテーブル

日時  平成28年5月21日(土)12:00〜
場所  なんとかゴルフクラブ
会費  5,000円(プレーフィ別途)

[html]

日時  平成28年5月21日(土)12:00〜
場所  なんとかゴルフクラブ
会費  5,000円(プレーフィ別途)

[/html]

ヘッダが横のテーブル

名前 会社名 業務内容 URL
イチロー なんとか商事 メンテナンス http://xxxxxx.com/

[html]

名前 会社名 業務内容 URL
イチロー なんとか商事 メンテナンス http://xxxxxx.com/

[/html]

CSSはこう書いてみる

[html]
* スマホ対策 ヘッダが縦のテーブル用CSS */

@media screen and (max-width:480px) {
.responsible_tate th, .responsible_tate td{
display:block;
}
}

/* スマホ対策 ヘッダが横のテーブル用CSS */
table.responsible_yoko {
width:100%;
border-collapse:collapse;
border-spacing:0;
border:1px solid #ccc;
padding:0;
margin:0;
 margin-top: 20px;
}

table.responsible_yoko tr{
border:1px solid #ddd;
padding:5px;
}

table.responsible_yoko th, table.responsible_yoko td{
padding:10px;
text-align:center;
}

table.responsible_yoko th{
font-size:14px;
letter-spacing:1px;
}

@media screen and (max-width: 480px) {

table.responsible_yoko {
border:0;
}

table.responsible_yoko thead{
display:none;
}

table.responsible_yoko tr{
margin-bottom:10px;
display:block;
border-bottom:2px solid #ddd;
}

table.responsible_yoko td{
display:block;
text-align:right;
font-size:13px;
border-bottom:1px dotted #ccc;
}

table.responsible_yoko td:last-child{
border-bottom:0;
}

table.responsible_yoko td:before {
content:attr(data-label);
float:left;
font-weight: bold;
}
}
[/html]

デモページ

ブラウザのワイドをびよ〜んと縮めてみると、tdが、下に落ちてきます。
横テーブルでは、表示がこのように変わります。

スクリーンショット 2015-09-26 20.49.24

コメントを残す

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