ブログ

レスポンシブデザインでのtableの対処方法

2015.07.09

レスポンシブデザインで作っていて困ってしまうのがtableの横幅。
スマホ縦に当たるwidth480px周辺になると、横に項目の多い表などは
幅が詰まって見るも無残….
そんな時はtableのセルのプロパティをlist化してしまうと良いです。

@media only screen and (max-width:480px){
table tr{
display: block;
}
table th,table td{
display: list-item;
border: none;
}
}

本サイトのでの使用例
PC、タブレットでの閲覧状態
pc
スマホでの閲覧状態
sp
※本サイトのCSSは記述は古いため戻すとレイアウトが崩れます…(涙)
時間がある時にでも修正します…orz
注意点としてはWindowsのInternet Explorerに関してはver10から対応する。
まあ、わざわざPCのブラウザで横幅を480pxまで縮めて見ることもないと思うので、私は使ってしまってます…(汗)
飽くまでスマホで見た時見やすいのが前提なので!

BLOG

Archive

Category

Recent Entry


042-783-3557
平日9:00〜19:00

フォームからの
お問い合わせ

LINEでの
お問い合わせ
電話
LINE友達登録
ページTOPヘ