How can display table-row behave like colspan=3

Question

I need two rows, the first one have 3 columns and the second I need to span all the width just like the td colspan=3 would do

Or display: table-cell; behave like colspan=3

I am using display: table-row; width: 100%;

How can it be done ?

This is my CSS :

<style>
      .boxer {
         display: table;
         border-collapse: collapse;
      }
      .boxer .box-row {
         display: table-row;
      }
      .boxer .box-row-search {
         display: table-row;
         width: 100%;
      }
      .boxer .box {
         display: table-cell;
         text-align: left;
         vertical-align: top;
         border: 1px solid black;
      }
</style>

Better to post the HTML too. – Stickers Apr 05 '16 at 00:45 — Stickers, Apr 05 '16 at 00:45
This is the HTML: `

1

2

3

4

` – Ângelo Rigo Apr 05 '16 at 00:57 — Ângelo Rigo, Apr 05 '16 at 00:57

score 7 · Accepted Answer · edited May 23 '17 at 12:14

7

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>

edited May 23 '17 at 12:14

Community

1
1

answered Apr 05 '16 at 01:02

Roko C. Buljan

196,159
39
305
313

Thank you so much Roko it help me a lot. I am just looking for CSS responsive for now – Ângelo Rigo Apr 05 '16 at 01:10
1

**Cool!** @ÂngeloRigo you're welcome! It's totally responsive http://jsbin.com/heriyo/1/ so go for it. – Roko C. Buljan Apr 05 '16 at 01:12
Can i try 2 rows, the first row will have 3 collumns, the 3 collumn rowspan = 2 and the second row colspan=2 – Ângelo Rigo Apr 05 '16 at 01:18

How can display table-row behave like colspan=3

1 Answers1

Linked