DIVテーブルで列スパンと行スパンを行う方法

Question

DIVとPのみを使用してテーブルを作成しました。 このコードでは、どのように行間または行間をしますか？

<div style="display: table; width: 100%;"> 
 
    <div class="row" style="display: 
 
    table-row;"> 
 
    <p style="display: table-cell; border: solid 1px gray; padding: 
 
    3px;">col A</p> 
 
    <p style="display: table-cell; border: solid 1px gray; padding: 3px;">col B 
 
    </p> 
 
    <p style="display: table-cell; border: solid 1px gray; padding: 3px;">col C 
 
    </p> 
 
    </div> 
 
    <div class="row" style="display: table-row;"> 
 
    <p style="display: table-cell; 
 
    border: solid 1px gray; padding: 3px;">apple</p> 
 
    <p style="display: table-cell; border: solid 1px gray; padding: 
 
    3px;">banana</p> 
 
    <p style="display: table-cell; border: solid 1px gray; padding: 
 
    3px;">cancel</p> 
 
    </div> 
 
    <div class="row" style="display: table-row;"> 
 
    <p style="display: table-cell; 
 
    border: solid 1px gray; padding: 3px;">analysis</p> 
 
    <p style="display: table-cell; border: solid 1px gray; padding: 
 
    3px;">believe</p> 
 
    <p style="display: table-cell; border: solid 1px gray; padding: 
 
    3px;">cry</p> 
 
    </div> 
 
</div>

私は、最初の列の2行目と3行目をマージしたいです。あなたは、単にこのように境界線を削除することができます（リンゴと分析）

Answer 1

：

<div style="display: table; width: 100%;"> 
 
    <div class="row" style="display: 
 
    table-row;"> 
 
    <p style="display: table-cell; border: solid 1px gray; padding: 
 
    3px;">col A</p> 
 
    <p style="display: table-cell; border: solid 1px gray; padding: 3px;">col B 
 
    </p> 
 
    <p style="display: table-cell; border: solid 1px gray; padding: 3px;">col C 
 
    </p> 
 
    </div> 
 
    <div class="row" style="display: table-row;"> 
 
    <p style="display: table-cell; 
 
    border: solid 1px gray; padding: 3px;border-bottom:none;">apple</p> 
 
    <p style="display: table-cell; border: solid 1px gray; padding: 
 
    3px;">banana</p> 
 
    <p style="display: table-cell; border: solid 1px gray; padding: 
 
    3px;">cancel</p> 
 
    </div> 
 
    <div class="row" style="display: table-row;"> 
 
    <p style="display: table-cell; 
 
    border: solid 1px gray; padding: 3px;border-top:none;">analysis</p> 
 
    <p style="display: table-cell; border: solid 1px gray; padding: 
 
    3px;">believe</p> 
 
    <p style="display: table-cell; border: solid 1px gray; padding: 
 
    3px;">cry</p> 
 
    </div> 
 
</div>