Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

css

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.

like image 392
fadedbee Avatar asked Apr 05 '13 08:04

fadedbee


People also ask

Can we use Colspan in div tag?

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.

What is the function of Colspan?

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.

How do you add Colspan to a table?

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.

Can we use Colspan and Rowspan together?

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.


1 Answers

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/

like image 50
harishannam Avatar answered Oct 02 '22 14:10

harishannam