Ângelo Rigo Ângelo Rigo - 4 months ago 33
CSS Question

How can display table-row behave like colspan=3

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>

Answer

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>