How to style div elements to form a table

Question

I have some divs and I want to form a table style.

<div style="display: table;">
  <div style="display: table-row;">
    <div style="display: table-cell;">
      left column
    </div>
    <div style="display: table-cell;">
      right column
    </div>
  </div>
  <div style="display: table-row;">
    <div style="display: table-cell;background-color:yellow">
      one column on this row
    </div>
  </div>
</div>

I need two columns on the first row , and one column on the second row, that is going to be full width, like we do colspan="2". But, can we do something like with with style?

Answer 1

it is the limitation of display:table you can not achieve desired layout with this, you can use flux do get the job done. you can check it out from the link below

How can display table-row behave like colspan=3