CSS display table, table-cell について

以下のようなコードの場合、全 2 行になり、
1 行目は 3 列で、各 およそ 33%
2 行 2 列で、各 50%

1,2 行目がずれてしまいます。ずれないように均等幅で並べるにはどのようにすればよいでしょうか ?
通常のテーブルのようにしたいのですが、
分かる方おりましたら、ご教授下さい。

宜しくお願い致します。

( HTML )
<div class="box">
<div class="pane">A</div>
<div class="pane">B</div>
<div class="pane">C</div>
</div>

<div class="box">
<div class="pane">D</div>
<div class="pane">E</div>
</div>


( CSS )
display: table;
width: 100%;
table-layout: fixed;
}
.pane {
display: table-cell;
border: solid 1px #333333;
}

No.1 ベストアンサー 回答者： rsatsumi 回答日時： 2019/07/07 21:42

HTML

<div class="box">
<div class="row">
<div class="pane">A</div>
<div class="pane">B</div>
<div class="pane">C</div>
</div>

<div class="row">
<div class="pane">D</div>
<div class="pane">E</div>
</div>
</div>

CSS
.box {
display: table;
width: 100%;
table-layout: fixed;
}
.pane {
display: table-cell;
border: solid 1px #333333;
}
.row {
display: table-row;
}

この回答へのお礼

display: table-row; の使い方勉強になりました。
ご回答頂き、大変ありがとうございました。

お礼日時：2019/07/07 23:16