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.
The point is that it is fine to use them, but only in places where you are actually display a table of data. The short answer to your question is I don't think you can -- colspan and rowspan are specific to tables. If you want to carry on using them, you will need to use tables.
The colspan attribute in HTML specifies the number of columns a cell should span. It allows the single table cell to span the width of more than one cell or column. It provides the same functionality as “merge cell” in a spreadsheet program like Excel.
The colspan attribute in HTML is used to set the number of columns a cell should span in a table. Use the colspan attribute on the <td> or <th> element.
Of course, you can mix colspan and rowspan to get a range of various tables. Example 4-13 demonstrates a mix of column and row spanning.
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With