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

ヘッダが縦のテーブル

[html]

[/html]

ヘッダが横のテーブル

[html]

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