How to use rowspan in div based table structure?

Question

I am making a project based on the grid. I am using bootstrap, CSS, and HTML for making the grid. I need to display a grid like this Image. But the row span is not working properly. I am using fully div structure, not the table. My code is: `

<div>
<div class="row">
<div class="col-md-4">
</div>
</div>
<div class="col-md-4">
</div>
<div rowspan="2" class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
<div class="col-md-4">
</div>
</div>
</div>

`

Possible duplicate of [Bootstrap combining rows (rowspan)](https://stackoverflow.com/questions/16351404/bootstrap-combining-rows-rowspan) — Santhosh Kumar, Feb 12 '19 at 16:46

score 2 · Answer 1 · edited Feb 17 '19 at 08:55

First I would suggest using indenting to make it more readable.

You would just create 3 columns next to each other and in the middle one start a new row.

In the code example I create 1 row and 2 columns that are full width, you could also just create 2 rows.

<div class='container'>
  <div class='row'>
    <div class='col-4 col1'>1</div>
    <div class='col-4'>
      <div class='row'>
        <div class='col-12 col2'>2</div>
        <div class='col-12 col3'>3</div>
      </div>
    </div>
    <div class='col-4 col4'>4</div>
  </div>  
</div>

https://codepen.io/anon/pen/XOYZRG?editors=1100

Thank you for the give me an answer. – Feb 12 '19 at 16:57 — , Feb 12 '19 at 16:57

score 1 · Accepted Answer · answered Feb 12 '19 at 16:50

1

Use class="short-div" at col-md-6 in both the div. Remove col-md-6 from both the div, also remove rowspan.

answered Feb 12 '19 at 16:50

PLB

265
2
17

How to use rowspan in div based table structure?

2 Answers2