Colspan / Rowspan for items whose mapping is set to table-cell

Question

I have the following code:

<div class="table"> <div class="row"> <div class="cell">Cell</div> <div class="cell">Cell</div> </div> <div class="row"> <div class="cell colspan2">Cell</div> </div> </div> <style> .table { display: table; } .row { display: table-row; } .cell { display: table-cell; } .colspan2 { /* What to do here? */ } </style> 

Pretty simple. How to add colspan (or colspan equivalent) for elements with display: table-cell ?

Answer 1

As far as I know, the lack of colspan / rowspan is just one of the limitations of display:table . View this post:

http://www.onenaught.com/posts/201/use-css-displaytable-for-layout

Answer 2

Since the OP does not explicitly claim that the solution should be pure CSS, I will be stubborn and give up my workaround that I found out today, especially since it is much more elegant than having a table inside a table.

An example is a table> with two cells in a row and two rows, where the cell in the second row is td with colspan="2" .

I tested this with Iceweasel 20, Firefox 23 and IE 10.

 div.table { display: table; width: 100px; background-color: lightblue; border-collapse: collapse; border: 1px solid red; } div.row { display: table-row; } div.cell { display: table-cell; border: 1px solid red; } div.colspan, div.colspan+div.cell { border: 0; } div.colspan>div { width: 1px; } div.colspan>div>div { position: relative; width: 99px; overflow: hidden; } 

 <div class="table"> <div class="row"> <div class="cell">cell 1</div> <div class="cell">cell 2</div> </div> <div class="row"> <div class="cell colspan"> <div><div> cell 3 </div></div> </div> <div class="cell"></div> </div> </div> 

Live action (demo) here .

EDIT: I finished the code to be more printable, since by default they leave background colors. I also created rowspan-demo , inspired by the late answer here.

Answer 3

A simpler solution that works for me in Chrome 30:

Colspan can be emulated using display: table instead of display: table-row for rows:

 .table { display: block; } .row { display: table; width: 100%; } .cell { display: table-cell; } .row.colspan2 {/* You'll have to add the 'colspan2' class to the row, and remove the unused <div class=cell> inside it */ display: block; } 

The only mistake is that the cells of the stacked rows will not be aligned vertically, since they are from different tables.

Answer 4

Just use table .

Table

only frowned when used for layout purposes.

This is similar to tabular data (rows / columns of data). Therefore, I would recommend using table .

For more information, see my answer to this question :

creating the same thing with divs as tables

Answer 5

If you are looking for a direct CSS way to simulate colspan, you can use display: table-caption .

 .table { display: table; } .row { display: table-row; } .cell { display: table-cell; border: 1px solid #000; } .colspan2 { /* What to do here? */ display: table-caption; } 

 <div class="table"> <div class="row"> <div class="cell">Cell</div> <div class="cell">Cell</div> </div> <div class="row"> <div class="cell colspan2">Cell</div> </div> </div> 

Answer 6

CSS

 .tablewrapper { position: relative; } .table { display: table; position: relative } .row { display: table-row; } .cell { border: 1px solid red; display: table-cell; } .cell.empty { border: none; width: 100px; } .cell.rowspanned { position: absolute; top: 0; bottom: 0; width: 100px; } .cell.colspan { position: absolute; left: 0; right: 0; } 

HTML

 <div class="tablewrapper"> <div class="table"> <div class="row"> <div class="cell rowspanned"> Center </div> <div class="cell"> Top right </div> </div> <div class="row"> <div class="cell empty"></div> <div class="cell colspan"> Bottom right </div> </div> </div> </div> 

The code

Answer 7

Here is one way to cover the columns in CSS that I used for my own situation.

https://jsfiddle.net/mb8npttu/

 <div class='table'> <div class='row'> <div class='cell colspan'> spanning </div> <div class='cell'></div> <div class='cell'></div> </div> <div class='row'> <div class='cell'>1</div> <div class='cell'>2</div> <div class='cell'>3</div> </div> </div> <style> .table { display:table; } .row { display:table-row; } .cell { display:table-cell; } .colspan { max-width:1px; overflow:visible; } </style> 

Answer 8

Using the appropriate div classes and CSS attributes, you can mimic the desired colspan and rowspan effects.

Here is CSS

 .table { display:table; } .row { display:table-row; } .cell { display:table-cell; padding: 5px; vertical-align: middle; } 

Here is a sample HTML

 <div class="table"> <div class="row"> <div class="cell"> <div class="table"> <div class="row"> <div class="cell">X</div> <div class="cell">Y</div> <div class="cell">Z</div> </div> <div class="row"> <div class="cell">2</div> <div class="cell">4</div> <div class="cell">6</div> </div> </div> </div> <div class="cell"> <div class="table"> <div class="row"> <div class="cell"> <div class="table"> <div class="row"> <div class="cell">A</div> </div> <div class="row"> <div class="cell">B</div> </div> </div> </div> <div class="cell"> ROW SPAN </div> </div> </div> </div> </div> </div> 

From what I see in both the questions and most of the answers, people seem to forget that in any given div acting as a “table-cell”, you can insert another div that acts like an inline table, and start the process.

*** This is not glamorous, but it works for those who are looking for this type of formatting, and they want to avoid TABLES. If its for DATA LAYOUT, TABLES still work in HTML5.

Hope this helps someone.

Answer 9

You can set the colspan content position as "relative" and the string as "absolute" as follows:

 .table { display: table; } .row { display: table-row; position: relative; } .cell { display: table-cell; } .colspan2 { position: absolute; width: 100%; } 

Answer 10

You cannot achieve this at present.

AFAIK, this will be covered by CSS Tables , a specification that is apparently in a “work in progress” state.

Answer 11

You can try this solution where you can find a way to use colspan using the div https://codepen.io/pkachhia/pen/JyWMxY

HTML:

 <div class="div_format"> <div class="divTable"> <div class="divTableBody"> <div class="divTableRow"> <div class="divTableCell cell_lable">Project Name</div> <div class="divTableCell cell_value">: Testing Project</div> <div class="divTableCell cell_lable">Project Type</div> <div class="divTableCell cell_value">: Web application</div> </div> <div class="divTableRow"> <div class="divTableCell cell_lable">Version</div> <div class="divTableCell cell_value">: 1.0.0</div> <div class="divTableCell cell_lable">Start Time</div> <div class="divTableCell cell_value">: 2016-07-10 11:00:21</div> </div> <div class="divTableRow"> <div class="divTableCell cell_lable">Document Version</div> <div class="divTableCell cell_value">: 2.0.0</div> <div class="divTableCell cell_lable">End Time</div> <div class="divTableCell cell_value">: 2017-07-10 11:00:23</div> </div> <div class="divTableRow"> <div class="divTableCell cell_lable">Document Revision</div> <div class="divTableCell cell_value">: 3</div> <div class="divTableCell cell_lable">Overall Result</div> <div class="divTableCell cell_value txt_bold txt_success">: Passed</div> </div> </div> <div class="divCaptionRow"> <div class="divCaptionlabel">Description</div> <div class="divCaptionValue">: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</div> </div> </div> </div> 

CSS

 body { font-family: arial } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box } .div_format { width: 100%; display: inline-block; position: relative } .divTable { display: table; width: 100%; } .divTableRow { display: table-row } .divTableHeading { background-color: #EEE; display: table-header-group } .divTableCell, .divTableHead { display: table-cell; padding: 10px } .divTableHeading { background-color: #EEE; display: table-header-group; font-weight: bold } .divTableFoot { background-color: #EEE; display: table-footer-group; font-weight: bold } .divTableBody { display: table-row-group } .divCaptionRow{ display: table-caption; caption-side: bottom; width: 100%; } .divCaptionlabel{ caption-side: bottom; display: inline-block; background: #ccc; padding: 10px; width: 15.6%; margin-left: 10px; color: #727272; } .divCaptionValue{ float: right; width: 83%; padding: 10px 1px; border-bottom: 1px solid #dddddd; border-right: 10px solid #fff; color: #5f5f5f; text-align: left; } .cell_lable { background: #d0d0d0; border-bottom: 1px solid #ffffff; border-left: 10px solid #ffffff; border-right: 10px solid #fff; width: 15%; color: #727272; } .cell_value { border-bottom: 1px solid #dddddd; width: 30%; border-right: 10px solid #fff; color: #5f5f5f; } 

Answer 12

Using nested tables to nest column spacing ...

 <div class="table"> <div class="row"> <div class="cell"> <div class="table"> <div class="row"> <div class="cell">Cell</div> <div class="cell">Cell</div> </div> </div> </div> </div> <div class="row"> <div class="cell">Cell</div> </div> </div> 

Or use 2 tables where the column range spans the entire row ...

 <div class="table"> <div class="row"> <div class="cell">Cell</div> <div class="cell">Cell</div> </div> </div> <div class="table"> <div class="row"> <div class="cell">Cell</div> </div> </div> 

Answer 13

Even if this is an old question, I would like to share my solution to this problem.

 <div class="table"> <div class="row"> <div class="cell">Cell</div> <div class="cell">Cell</div> </div> <div class="row"> <div class="cell colspan"> <div class="spanned-content">Cell</div> </div> </div> </div> <style> .table { display: table; } .row { display: table-row; } .cell { display: table-cell; } .colspan:after { /* What to do here? */ content: "c"; display: inline; visibility: hidden; } .spanned-content { position: absolute; } </style> 

Here is the fiddle . This is not really a gap, and the solution is a bit hacky, but useful in some situations. Tested on Chrome 46, Firefox 31, and IE 11.

In my case, I had to present some non-tabular data in tabular form, preserving the width of the columns and pointing the header to the data subsections.