コンタクトフォーム7 tableタグのレスポンシブ化

<table class="form">
<tbody>
<tr>
<th>お問い合わせ項目<span class="required">＊</span></th>
<td> [select* your-menu "ご意見・ご要望・ご質問" "サポートについて"] </td>
</tr>
<tr>
<th>お名前 <span class="required">＊</span></th>
<td> [text* your-name] </td>
</tr>
<tr>
<th>メールアドレス<span class="required">＊</span></th>
<td>[email* your-email] </td>
</tr>
<tr>
<th>郵便番号</th>
<td>[text your-postalcode]</td>
</tr>
<tr>
<th>ご住所</th>
<td> [text your-address ]</td>
</tr>
<tr>
<th>電話番号(半角)</th>
<td> [tel your-tel]</td>
</tr>
<tr>
<th>お問い合わせ内容<span class="required">＊</span></th>
<td> [textarea* your-message] </td>
</tr>
</tbody>
</table>

PC表示

tbody{
max-width:80%;
height:auto;
background-color: #f1f2f3;
margin:0 auto;
border:1px solid #CCCCCC;

}

tbody th{
width:30%;
background-color:#888;
border:1px solid #CCCCCC;
}


tbody th, td{
padding:10px 0px; 
border:1px solid #CCCCCC;
vertical-align: middle; 
font-weight: normal; 
font-size: 100%;
text-align: left; 
}



 /* テキストエリアの設定 */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,select{
width: 100%;
background-color: #fff;
color: #000;
padding:10px 0 10px 10px;
margin:10px 0;
}


input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus,select:focus{
background-color: #fff;
}

スマートフォン表示

trに　display: block;　list-style: none;（ブロックレベル要素にする）
th, tdに　display: list-item;（li要素のようなリスト項目にする）

/*max-width: 480px*/
@media (max-width: 480px) {

.form{
max-width:100%;
}

tbody tr{
width:100%;
display: block;
list-style: none;
}

tbody th, td{
width:100%;
display: list-item;
padding:0px 0px; 
border:none;
}

 /* テキストエリアの設定 */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,select{
width:90%;
padding:10px 0px 0px 0px;
margin:10px 0;
}

}