Ângelo Rigo Ângelo Rigo - 1 year ago 86
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 :

.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;

Answer Source

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!

  display: flex;
  flex-flow: wrap;
  width: 25%;
  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>