Substitute for rowspan with css - css

Question

Hi,
I am trying to replace my table with divs and CSS but I cant figure out a way to mimic the rowspan attribute. This is my original code:
<table>
<tr>
<td>some content</td>
<td>some more content</td>
<td rowspan="2">THIS is A COLUMN</td>
</tr>
<tr>
<td colspan="2">SINGLE CELL ROW</td>
</tr>
</table>
With CSS:
<header>
<section>
<div>some content</div>
<div>some more content</div>
<div rowspan="2">THIS is A COLUMN</div>
</section>
<section>
<div>SINGLE CELL ROW</div>
</section>
</header>
header {display:table;}
section {display:table-row;}
div {display:table-cell;}
but it wont work because the div at the bottom will not go all the way below the rowspanned div as expected. Is there any CSS solution for this?
Thank you.
This is NOT A DUPLICATE. Im asking for ROWSPAN not colspan only.

Answer 1

You can achieve what you want, by changing your HTML markup a bit and using Flexbox
*,
*::before,
*::after {
box-sizing: border-box
}
body {
margin: 0
}
table {
width: 100%;
border-collapse: collapse
}
td {
border: 1px red solid
}
header {
display: flex
}
section {
flex: 1;
font-size: 0;
}
section > div {
border: 1px solid green;
font-size: 16px
}
section:first-of-type div {
border-right: 0
}
section:first-of-type div:not(:last-of-type) {
width: 50%;
display: inline-flex;
border-bottom: 0;
}
section:last-of-type div {
height: 100%;
align-items: center;
display: flex
}
<h2>TABLE</h2>
<table>
<tr>
<td>some content</td>
<td>some more content</td>
<td rowspan="2">THIS is A COLUMN</td>
</tr>
<tr>
<td colspan="2">SINGLE CELL ROW</td>
</tr>
</table>
<br />
<hr />
<h2>DIV</h2>
<header>
<section>
<div>some content</div>
<div>some more content</div>
<div>SINGLE CELL ROW</div>
</section>
<section>
<div>THIS is A COLUMN</div>
</section>
</header>

Answer 2

To do that table in flexbox, you could wrap each part that forms a row or a column
<div>
<div>
<div>
<div>some content</div>
<div>some more content</div>
</div>
<div>THIS is A COLUMN</div>
</div>
<div>SINGLE CELL ROW</div>
</div>
Then you can build nowrap rows and columns with flexbox to resemble your table
body div { border: 1px solid #999; margin: 0; }
body > div { display: flex; flex-flow: row nowrap; margin-top: 10px; }
body > div > div { display: flex; flex-flow: column nowrap; flex: 1 1 0; }
body > div > div > div { display: flex; flex-flow: row nowrap; flex: 1 1 1;}
body > div > div > div > div { flex: 1 1 0; }
Plunker: http://plnkr.co/edit/oo5UrUMgI85myujt5L6s?p=preview

Answer 3

.parent{
display: flex;
align-items: center;
width: 100%;
}
.child{
display: flex;
flex-direction: column;
border: 1px solid #444;
}
.row{
display: flex;
}
<div class="parent">
<div class="child">
<div class="row">
<div>some content</div>
<div>some more content</div>
</div>
<div class="row">
<div>SINGLE CELL ROW</div>
</div>
</div>
<div class="child">
<div class="row">
<div>THIS is A COLUMN</div>
</div>
</div>
</div>
Hope this is what you are looking for