CODEWITHSUNDEEP
csshtml-table
Cain Nuke
Cain Nuke

Reputation: 3083

Substitute for rowspan with css

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.

Upvotes: 0

Views: 3622

Answers (3)

Tienou
Tienou

Reputation: 720

.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

Upvotes: 0

C14L
C14L

Reputation: 12548

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

Upvotes: 0

dippas
dippas

Reputation: 60543

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>

Upvotes: 1

Related Questions