レスポンシブ対応のシンプルな２列のテーブル

会社概要やお問い合わせフォームでよくある
シンプルな２列のテーブルレスポンシブ版
細かな違いはあるものの
基本はほぼ同じHTMLのためまとめ

HTML

<table>
<tr>
　<th>会社名</th>
　<td>〇〇〇〇〇</td>
</tr>
<tr>
　<th>住所</th>
　<td>〇〇〇〇〇</td>
</tr>
<tr>
　<th>電話番号</th>
　<td>〇〇〇〇〇</td>
</tr>
<tr>
　<th>FAX番号</th>
　<td>〇〇〇〇〇</td>
</tr>
</table>

CSS

table {
    width: 100%;
    border-collapse: collapse;
}
    
th,td{
    display: block;
    width: 96%; 
    }
    
th {
    padding: 0.2em;
    margin: 0 auto;
    box-sizing: border-box;
    text-align: left;
}
    
td {
    padding: 0.5em;
    margin:0 auto 0.6em;
    box-sizing: border-box;
    border-bottom: 1px solid #ccc;
}
/* PC用：768px以上の場合 */
@media(min-width:768px) {
table {
    max-width: 700px;
    margin: 0 auto;
    border: 1px solid #ccc;
}
th {
    display: table-cell;
    width: 20%;
    padding: 0.5em;
    border: 1px dashed #ccc;
    border-right: 1px solid #ccc;
}
td {
    display: table-cell;
    border: 1px dashed #ccc;
}
}

スマホ版ではセルを横並びにせず
１列ずつにするためいったんブロック化
PC版ではそれを解除するためdisplay:table-cellを
設定しなおして、幅を指定

関連記事：では２列よりも列数が多いテーブルのレスポンシブ対応はどうするか？についてです
↓↓↓