スマホ用としての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が、下に落ちてきます。
横テーブルでは、表示がこのように変わります。