How can display table-row behave like colspan=3


Tags: css

Problem :

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>


Solution :

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>


    CSS Howto..

    How to apply a css class for jqGrid height property setGridHeight?

    How to add this element in jquery

    How to make image hover in css?

    Interface problem the right css style is not being called. How to call the right one?

    How to make CSS animation jump rather than slide

    How to Change Text Color with CSS Transitions?

    How can I reposition a DIV with jQuery? [closed]

    overlaping text with different styles over image, prevent text of one style to be shown on top of the text of another style

    how to relocation dropdownmenu by CSS

    How to vertically align div containers with CSS?

    How to manage div positionning?

    CSS HTML : stumped on how to center this piece of text

    How to force my text to not break into lines in css?

    How to let the users style a web component with their own CSS?

    how to trigger a stored property with css color change?

    How to reduce css http requests?

    How to animate image swap on hover

    How do I display a DIV if the current version of the program is greater than the version I have?

    How can I create inline CSS in a WordPress PHP file without referencing to an external CSS file?

    How to relativize URLs in css files in Hakyll?

    How to create a panel tab?

    Asp.Net-MVC: How to style <%=Html.ActionLink()%> with Css?

    CSS / JS: How do I tell my page to be completely unselectable, except for stuff inside a div?

    how to move 2 divs on hover with css

    How to create an animated rainbow line using CSS or Javascript?

    How do I put a box around my Flot graph?

    How to CENTER a Vertical Menu for ALL Screen Resolutions?

    How does Google Web Fonts decide which version of a font to provide to my browser?

    How to set z-index in css background

    Background image url is not showing the image