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

Question

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.

@BenM the point of using "display: table-cell" is so that the widths adjust to the size of the content. — fadedbee, Apr 05 '13 at 08:44
a similar question: http://stackoverflow.com/questions/2403990/html-colspan-in-css — t.niese, Apr 05 '13 at 08:45

harishannam · Accepted Answer · 2013-04-05T08:52:30.960

66

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

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;

edited Apr 05 '13 at 08:52

answered Apr 05 '13 at 08:40

harishannam

4

This is a good workaround, but cannot be applied for arbitrary rows (say, 2nd or 5th) in the table. In such a case, `display: table` or an inline table can do the trick. – Franz B. Mar 08 '15 at 22:07
http://jsfiddle.net/wo40ev18/3/ – Layke May 22 '15 at 13:16
Kudos for fiddle and Answer should go to: http://stackoverflow.com/a/9851624/383904 – Roko C. Buljan Dec 01 '15 at 23:21
4

what if i want caption below the table – Gaurav Aggarwal Feb 12 '16 at 07:09
3

.caption {border:1px solid grey; caption-side: bottom; display: table-caption; text-align: center; } to display caption below – eshaiju Jan 25 '17 at 07:16

1 Answers1