テーブルレイアウトについて教えて下さい。
下記のCSSでスマホの場合は@media***以下(縦組)を表示されるようにしたいのですが、うまく表示されません。PC上のブラウザテストでは問題ないのですが、何か良い方法はありませんでしょうか?
ちなみにテスト端末はiPhone5sです。
@charset "UTF-8";
/* CSS Document */
section table { width: 100%; }
section th, section td { padding: 10px; border: 1px solid #ddd; }
section th { background: #f4f4f4; }
/----------------------------------------------------
.demo01
----------------------------------------------------/
.demo01 { margin: 0 -10px; width: 100%; }
.demo01 th {
width: auto;
text-align: center;
background:-moz-linear-gradient(rgba(34,85,136,0.3), rgba(34,85,136,0.5) 50%);
background:-webkit-gradient(linear, 100% 0%, 100% 50%, from(rgba(34,85,136,0.3)), to(rgba(34,85,136,0.5)));
}
.demo01 td {
width: auto;
text-align: center;
background:-moz-linear-gradient(rgba(34,85,136,0.1), rgba(34,85,136,0.3) 50%);
background:-webkit-gradient(linear, 100% 0%, 100% 50%, from(rgba(34,85,136,0.1)), to(rgba(34,85,136,0.3)));
}
@media only screen and (max-width:680px){
.demo01 { margin: 0 -10px; width: 100%; }
.demo01 th{
width: 100%;
display: block;
border-top: none;
text-align: center;
background:-moz-linear-gradient(rgba(34,85,136,0.3), rgba(34,85,136,0.5) 50%);
background:-webkit-gradient(linear, 100% 0%, 100% 50%, from(rgba(34,85,136,0.3)), to(rgba(34,85,136,0.5)));
} .demo01 td{ width: 100%; display: block; border-top: none; text-align: center; background:-moz-linear-gradient(rgba(34,85,136,0.1), rgba(34,85,136,0.3) 50%); background:-webkit-gradient(linear, 100% 0%, 100% 50%, from(rgba(34,85,136,0.1)), to(rgba(34,85,136,0.3))); } .demo01 tr:first-child th { border-top: 1px solid #ddd; }
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。