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>

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

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>

如何在DIV表

1 个答案: