html - テーブルセルを表示するように設定されているdivの間にマージンを追加するにはどうすればよいですか？

Question

親divをdisplay：tableに設定し、それぞれの3つの子divをdisplay：inline-cellに設定しました。これらの3つの子divは水平に積み重ねられ、3つの子divに3ピクセルの境界線を設定しました。スペースが境界線の内側ではなく外側に配置されるように、子divの間にマージンを追加するにはどうすればよいですか？

Answer 1

cssが無効です：「display：inline-cell」は有効なcss宣言ではありません。代わりに「display：table-cell」を使用する必要があります。それらを互いに積み重ねて実行できるようにする場合は、各「テーブルセル」を「テーブル行」にラップする必要があります。

HTML

<div class="table">
    <div class="tableRow">
      <div class="tableCell">Cell 1</div>
    </div>
    <div class="tableRow">
      <div class="tableCell">Cell 2</div>
    </div>
    <div class="tableRow">
      <div class="tableCell">Cell 3</div>
    </div> 
</div>

CSS

.table{
border: 2px solid #999;
display: table;
border-spacing: 15px;
}
.tableRow{
    display: table-row;
}
.tableCell{
    border: 3px solid #333;
    border-collapse: separate;
    display: table-cell;
    border-collapse: separate;    
}