How to imitate table's colspan using div with CSS?

Question

How to make column span with div?

I want to join divs using class .div-table-col.

This is my code:

.div-table {
  display: table;
  width: 100%;
  align: center; 
}
.div-table-row {
  display: table-row;
  width: auto;
  clear: both;
  width: 100%;
  margin:10px;
}
.div-table-col {
  float: left;
  display: table-column;
  width: 50%;
}
.div-table-col .title {
  text-align: right;
  margin: auto;
  margin-left: -10px;
}
.div-table-col .data {
  text-align: left;
  text-indent: 0.5em;
  margin:auto;
}

<div class="div-table-row">            
  <div class="div-table-col title"></div>
  <div class="div-table-col data"></div>        
</div>

You want to do what `col-span` do in ``?
– Carl Binalla Aug 03 '18 at 09:37 — Carl Binalla, Aug 03 '18 at 09:37

score 1 · Accepted Answer · answered Aug 03 '18 at 09:37

I suggest to look at Flexbox. It's much easier to create columns.

 // CSS //
.flexcontainer {
   display: flex;
   flex-direction: row;
}

// HTML //
<body>
   <div class="flexcontainer">
      <div>column1</div>

      <div>column2</div>
   </div>
</body>

How to imitate table's colspan using div with CSS?

1 Answers1