佐賀のホームページ制作なら株式会社イン・ザ・コム

【コピペOK】レスポンシブなテーブルデザインCSSを作ろう

完成形はこちらです

店名 海鮮戸ばた えびす丸
ジャンル 魚介料理・海鮮料理、居酒屋、郷土料理
TEL・予約 0952-29-6120
住所 佐賀県佐賀市中央本町2-7
交通手段 佐賀駅バスセンターからバスで5分「中の小路」下車、徒歩3分
佐賀駅から1,250m
営業時間 17:00~24:00(フード L.O.23:00、ドリンク L.O.23:30)
夜10時以降入店可
定休日 日曜日
予算 [夜]¥3,000~¥3,999
カード 可 (VISA、MASTER、JCB、AMEX、Diners)

responsive

簡単に言うと、table th部分をスマホで幅100%にして見やすくするというもの。

HTML

<table class="shokai">
<tr><th>店名</th><td>海鮮戸ばた えびす丸</td></tr>
<tr><th>ジャンル</th><td>魚介料理・海鮮料理、居酒屋、郷土料理</td></tr>
<tr><th>TEL・予約</th><td>0952-29-6120</td></tr>
<tr><th>住所</th><td>佐賀県佐賀市中央本町2-7<br><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3336.4908031500313!2d130.301833!3d33.25364099999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3541ca710fd65f9b%3A0x7382cf63422c441c!2z44GI44Gz44GZ5Li4!5e0!3m2!1sja!2sjp!4v1411007208459" width="100%" height="450" frameborder="0" style="border:0"></iframe></td></tr>
<tr><th>交通手段</th><td>佐賀駅バスセンターからバスで5分「中の小路」下車、徒歩3分<br>佐賀駅から1,250m</td></tr>
<tr><th>営業時間</th><td>17:00~24:00(フード L.O.23:00、ドリンク L.O.23:30)<br>
夜10時以降入店可</td></tr>
<tr><th>定休日</th><td>日曜日</td></tr>
<tr><th>予算</th><td>[夜]¥3,000~¥3,999</td></tr>
<tr><th>カード</th><td>可 (VISA、MASTER、JCB、AMEX、Diners)</td></tr>
</table>

CSS

/*** レスポンシブテーブルデザイン ***/
.shokai{
  width:100%;
  border: 2px solid #d6ceb4;
  overflow: hidden;
  word-break: break-all;
  word-wrap: break-word;
}

.shokai th{
  padding: 6px 8px 5px;
  border-top: solid 1px #ffffff;
  width: 30%;
  overflow: hidden;
  color: #13131e;
  font-style: normal;
  font-weight: bold;
  font-size: 100%;
  text-align: left;
  word-break: break-all;
  word-wrap: break-word;
  vertical-align: top;
  background-color: #eeece4;
}

.shokai td{
padding: 5px 10px;
text-align: left;
vertical-align: top;
color: #595960;
background-color: #ffffff;
border-top: dotted 1px #e0dccc;
overflow: hidden;
word-break: break-all;
word-wrap: break-word;
}

@media (max-width: 400px){
.shokai th{
  width:100%;
  display:block;
  margin: 0 auto;
  border:none;
  border-radius: 3px;
}
.shokai td{
  display: list-item;
  width: 100%;
  border-top: none !important;
}
}/* end */

この記事が気に入ったら
いいね!しよう

Twitter で

関連する記事

Copyright © IN THE COM .inc All rights recerved.