「Contact Form 7」のフォームのレイアウトを見やすくする

<table class="contact-form">
  <tr>
    <td>お名前<span>必須</span></td>
    <td>[text* your-name]</td>
  </tr>
  <tr>
    <td>メールアドレス<span>必須</span></td>
    <td>[email* your-email]</td>
  </tr>
  <tr>
    <td>題名</td>
    <td>[text your-subject]</td>
  </tr>
  <tr>
    <td>メッセージ本文</td>
    <td>[textarea your-message]</td>
  </tr>
</table>
[submit "送信"]

table.contact-form {
	width: 100%;
	border-collapse: separate;
	border-spacing: 8px;
	border: none;
}
table.contact-form td {
	border: none;
	padding: 0 15px;
}
table.contact-form td:nth-child(1) {
	white-space: nowrap;
	background: #333333;
	color: #FFFFFF;
}
table.contact-form td:nth-child(1) span {
	background: #CC0000;
	padding: 5px;
	font-size: 0.8em;
	margin-left: 10px;
}
@media only screen and (max-width:620px) {
	table.contact-form td {
		display: block;
		padding: 15px 0;
		text-align: center;
	}
}