レスポンシブ対応の表 センターからズレる

質問

レスポンシブ対応の表を作成したのですが、640px以下になるとテーブルがセンターから少しズレています。
原因が分からないのです。どうかアドバイスをお願いします。

CSS
table {
width: 80%;
margin: 20px auto;
}
.tbl td {
width: 50%;
border: solid 1px #ccc;
padding: 10px;
}
@media screen and (max-width: 640px) {
.tbl {
width: 80%;
}
.tbl td {
border-bottom: none;
display: block;
width: 100%;
}
}

HTMLタグ
<table class="tbl">
<tr>
<td>01</td>
<td>02</td>
</tr>
<tr>
<td>03</td>
<td>04</td>
</tr>
<tr>
<td>05</td>
<td>06</td>
</tr>
</table>

回答No.1

Proof4 · ベストアンサー

原因はtdにdisplay: blockを指定している点にあると考えられます。

ベストな解決策かどうかは微妙ですが、trをdisplay: flexにすると解決しました。(WindowsのChrome,Firefox,Edge各最新バージョンで確認)
CSSに下記を追加してみてください。
.tbl tr {
display: flex;
flex-wrap: wrap;
}

お礼

ありがとうございます。
おかげさまでうまくいきました。