レスポンシブル対応のtableソース

2015年6月11日 | Web

ウェブサイト制作する際に会社概要や飲食店のメニューなどをtableで制作される方も多いと思います。前に制作したサイトでtableをレスポンシブル対応させましたので、ソースを掲載致します。デフォルトのままコピーペーストでそのまま使って頂けます。

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>

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;
    }
}