Substitute for rowspan with 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.

Possible duplicate of [HTML colspan in CSS](http://stackoverflow.com/questions/2403990/html-colspan-in-css) — GolezTrol, May 23 '16 at 11:09
NO, ITS NOT A DUPLICATE. Im asking about ROWSPAN. Its not the same as colspan... — Cain Nuke, May 23 '16 at 11:11

score 1 · Answer 1 · answered May 23 '16 at 11:18

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>

answered May 23 '16 at 11:18

dippas

58,591
15
114
126

Thanks but the goal is to preserve the same order in the html structure – Cain Nuke May 23 '16 at 11:40
1

@CainNuke I just change one div to another. Why you need to keep that structure? – dippas May 23 '16 at 11:41
because the content in the column has more priority than the one in the single cell row. – Cain Nuke May 23 '16 at 11:43
So? still can't see no reason for not changing the html markup. Its not a semantic problem. This change won't affect the indexation in searches so why again? – dippas May 23 '16 at 11:46
Its my navigation, I want it as close to the top as possible. – Cain Nuke May 23 '16 at 12:03
The output is the same, That isn't enough reason. I tried to help you by giving you a working solution. – dippas May 23 '16 at 12:05
Its okay, I appreciate your help anyway. Call it nitpicking if you want but I wanted to preserve the same order. I was almost sure it was not possible to achieve the rowspan effect with css only but I asked anyway just in case. – Cain Nuke May 23 '16 at 12:13

Tienou · Answer 2 · 2016-05-23T11:31:35.707

0

.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

edited May 23 '16 at 11:31

answered May 23 '16 at 11:02

Tienou

700
6
17

Thank you but the column is missing? – Cain Nuke May 23 '16 at 11:07
I think you'd have to change up the HTML for that – Tienou May 23 '16 at 11:09
That could be a problem. So in other words its impossible to get rowspan with CSS? – Cain Nuke May 23 '16 at 11:12
You are changing the order of the html structure which I dont intend. – Cain Nuke May 23 '16 at 11:39

score 0 · Answer 3 · answered May 23 '16 at 11:20

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

Not bad but you are changing the order of the html structure. — Cain Nuke, May 23 '16 at 11:37

Substitute for rowspan with css

3 Answers3