Single Post
レスポンシブル対応のtableソース
| Web
ウェブサイト制作する際に会社概要や飲食店のメニューなどをtableで制作される方も多いと思います。前に制作したサイトでtableをレスポンシブル対応させましたので、ソースを掲載致します。デフォルトのままコピーペーストでそのまま使って頂けます。
HTML
[html]
<table class="table-re">
<tr>
<th>会社名</th>
<td>TREE CAMP</td>
</tr>
<tr>
<th>所在地</th>
<td>山口県山口市小郡船倉町</td>
</tr>
<tr>
<th>設立</th>
<td>1983年</td>
</tr>
<tr>
<th>資本金</th>
<td>5,000万円</td>
</tr>
<tr>
<th>TEL</th>
<td>03-0123-4567</td>
</tr>
<tr>
<th>業務内容</th>
<td>戸建て住宅・店舗の設計・建築販売</td>
</tr>
<tr>
<th>支店</th>
<td>山口市・下関市・周南市</td>
</tr>
<tr>
<th>従業員数</th>
<td>1,000人</td>
</tr>
</table>
[/html]
CSS
[css]
.table-re{
width: 100%;
margin:15px 0;
border-top:1px solid #ddd;
border-right:1px solid #ddd;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
}
.table-re th, .table-re td{
padding:15px;
border-bottom:1px solid #ddd;
border-left:1px solid #ddd;
}
.table-re th {
background-color:#f4f4f4;
}
@media screen and (max-width:480px) {
.table-re th, .table-re td{
display:block;
width: 100%;
margin: 0 auto;
text-align: center;
}
}
[/css]
まとめ
掲載したソースは、簡単なテーブル制作の時に役に立つと思います。HTMLソースを変更すれば、料金の価格表などにも対応できると思いますので、使って頂ければ幸いです。
