Using "display: table-cell" is there a way of getting the "colspan" functionality?

Css

Css Problem Overview


Using display: table-cell is there a way of getting the colspan functionality, which is available when using real table cells?

In particular I need some "cells" to span multiple columns.

Real tables are not a possibility as I am using a form per row layout, which won't validate as a real table.

Css Solutions


Solution 1 - Css

No you cannot add colspan or rowspan to display:table-cell. It is one of the limitations in table-cell feature!

You can check the limitations in this reference link

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

If you want to bring the COLSPAN feature into table-cell, then you have to use table-row-group and table-caption feature as follows

display: table-caption

and

table-row-group;

Check this fiddle link : http://jsfiddle.net/ZQQY4/

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionfadedbeeView Question on Stackoverflow
Solution 1 - CssharishannamView Answer on Stackoverflow