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

dMilan

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>

oputyk

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>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How to imitate this table using Tkinter?

How to overlay an oversize div on multiple table cell without using colspan

How DIV & CSS work with Rowspan & Colspan?

how to make table in html using rowspan and colspan?

How to build this table by using colspan and rowspans?

Issues with colspan in CSS table

How to imitate std::string's find_first_not_of using strspn

Using colspan in a table with Elm

How to center a div horizontally in a table using CSS

HTML/CSS table with phantom `colspan`

MudBlazor: How to create a custom table with MudTable using colspan and rowspan?

How to design this type table structure in html using rowspan and colspan

How to put dynamic `colspan` into HTML table using JavaScript

Align table using rowspan and colspan

How to create a table using multiple span in one div using CSS

How do I imitate useEffect using componentWillReceiveProps?

How to parse table with rowspan and colspan

Div table showing disturbed cells for ColSpan

Table css width is broken by colspan attribute

How to imitate mouse scroll inside div in popup with puppeteer?

Using colspan and rowspan in same cell in HTML table

How to change div's css using toogleClass properly?

How to centre a <div> within several other <div>s (using a mixture of w3.css and css)

How to make the table in word using PHPWord which includes multiple rowspan and colspan?

How to scrape a td beside a td colspan of table

How to imitate Python 3's raise ... from in Python 2?

Convert table to div in angularjs using css

Add new row's to div generated table using CSS, ajax and jQuery

How to hide div that has a table inside if the table's <td> is empty when filtering using search?