トップ > ウェブ制作 > 【コピペOK】レスポンシブなテーブルデザインCSSを作ろう

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

 
最新更新日：2018年11月7日(水曜日)
公開日：2014年10月7日(火曜日)
Pocket
このエントリーをはてなブックマークに追加

2018.11.7 コードを修正しました完成形はこちらです

店名 海鮮戸ばた えびす丸
ジャンル 魚介料理・海鮮料理、居酒屋、郷土料理
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">
<tbody>
<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
 <iframe style="border: 0;" 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"></iframe></td>
</tr>
<tr>
<th>交通手段</th>
<td>佐賀駅バスセンターからバスで5分「中の小路」下車、徒歩3分
 佐賀駅から1,250m</td>
</tr>
<tr>
<th>営業時間</th>
<td>17:00～24:00（フード L.O.23:00、ドリンク L.O.23:30）
 夜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>
</tbody>
</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 */


		  

			
地方で集客するために知っておくべき27の集客方法

			
			
色んな広告を試したけど、さんざんな結果だった。どうやって集客していいか分からないという方のために書きました。

			
実は業態・業種によって集客方法は全然違います。例えば以下の法則を知って居ましたか？

			
			
    
			  
  • LINE@の運用次第で反応率◯％以上になる
    • 
			  
  • FAXDMという古典的な方法が通用する業界がある
    • 
			  
  • 集客におけるホームページの役割って？
    • 
			

			
			
本書では、全業種の集客経験を元に実際の反応率を公開しています。
			  
 是非無料でダウンロードして、今後の集客にご活用ください。
			

			
			Ebookを受け取る
		  

		  
		


関連記事