html - 如何在 DIV 表中列跨度和行跨度

Question

我只使用 DIV 和 P 制作了表格。我如何在此代码中进行 col-span 或 row-span？

<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>

我想合并第一列的第二行和第三行。 (苹果和分析)

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>