Div Table Colspan: How

DIV table colspan: how?

I would imagine that this would be covered by CSS Tables, a specification which, while mentioned on the CSS homepage, appears to currently be at a state of "not yet published in any form"

In practical terms, you can't achieve this at present.

Colspan/Rowspan for elements whose display is set to table-cell

As far as I know, the lack of colspan/rowspan is just one of the limitations of display:table. See this post:

http://www.onenaught.com/posts/201/use-css-displaytable-for-layout

How to imitate table's colspan using div with CSS?

I suggest to look at Flexbox. It's much easier to create columns.

 // CSS //
.flexcontainer {
   display: flex;
   flex-direction: row;
}

// HTML //
<body>
   <div class="flexcontainer">
      <div>column1</div>

      <div>column2</div>
   </div>
</body>

How can display table-row behave like colspan=3

Using display: table; it cannot be done (cause sadly there's no colspan: 3; or rowspan property in CSS, therefore stylesheet is unable to mimick a real <table> element)

but hey, flex to the rescue!

.row{  display: flex;  flex-flow: wrap;}.cell{  width: 25%;  background:#eee;}.colspan2{  flex: 2;}

<div class="row">  <div class="cell">Cell1</div>  <div class="cell">Cell2</div>  <div class="cell">Cell3</div>  <div class="cell">Cell4</div>  <div class="cell">Cell5</div>  <div class="cell colspan2">Cell6 Colspan2</div>  <div class="cell">Cell7</div></div>

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

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>

How DIV & CSS work with Rowspan & Colspan?

Try adding another class to your merged column, like so:

<div class='cell merged'>Merged Area</div>

and change the css of the merged area, like so:

.merged{
    width:50%;
    height:50%;
}

The reason I did this is because you had the same class on your merged area, but you wanted the size to take up double the space of a normal cell. So all I did was add an additional class changing the width and height of the merged area to get the desired result.

Here is an updated Fiddle:

https://jsfiddle.net/6hx2uooz/4/

Colspan alternative in <div> based structure

Sure there is!

Demo Fiddle

HTML

<div class='table'>
    <div class='row'>
        <div class='table'>
            <div class='cell'>One</div>
            <div class='cell'>Two</div>
        </div>
        <div class='cell'>Three</div>
    </div>
    <div class='row'>
        <div class='cell'>Four</div>
        <div class='cell'>Five</div>
    </div>
</div>

CSS

html, body{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
.table {
    display:table;
    width:100%;
    height:100%;
}
.cell {
    display:table-cell;
    width:50%;
}
.row {
    display:table-row;
}
.cell {
    background:red;
    color:white;
    border:5px solid white;    
}

Div Table Colspan: How