【CSS】コピペでOK。レスポンシブな「table」を作る

会社概要やお問い合わせページなどで使う事のある表組みを、レスポンシブな「table」で作る方法です。

実際のページを下記のデモページよりご確認ください。
ブラウザを狭めてみると、レイアウトが変わります。

「html」と「css」は下記になります。

◆「html」

<table class="tableSample">
<tr>
<th>会社名</th>
<td>株式会社〇〇〇〇〇〇〇</td>
</tr>
<tr>
<th>住所</th>
<td>〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇</td>
</tr>
<tr>
<th>電話番号</th>
<td>〇〇〇〇〇〇〇</td>
</tr>
<tr>
<th>代表者</th>
<td>〇〇〇〇〇〇〇</td>
</tr>
<tr>
<th>設立</th>
<td>〇〇〇〇〇〇〇</td>
</tr>
</table>

◆「css」

.tableSample {
width: 100%;
border-collapse: collapse;
}

.tableSample th,td {
padding: 10px 15px;
border: 1px solid #ddd;
}

.tableSample th {
background: #f4f4f4;
width: 15%;
text-align: left;
}

@media only screen and (max-width:479px) {
.tableSample th,td {
width: auto;
display: block;
border-top: none;
}
.tableSample tr:first-child {
border-top: 1px solid #d5d5d5;
}
}

※「border-collapse: collapse;」は隣接するセルのボーダーを重ねて表示する記述です。
※「border」の太さや色は自由に変更してください。