CODEWITHSUNDEEP
htmlcss
Adams
Adams

Reputation: 13

How do I col span and row span in the DIV table

I made the table with using DIV and P only. How do I col-span or row-span in this code?

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

I want to merge the second and third rows of the first column. (apple and analysis)

Upvotes: 1

Views: 2756

Answers (1)

Temani Afif
Temani Afif

Reputation: 274252

You can simply remove the border like this :

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

Upvotes: 1

Related Questions