CODEWITHSUNDEEP
htmlcss
WhatsInAName
WhatsInAName

Reputation: 724

Combine two rows to make it a single row

I need to combine two rows in a table into a single row so that I can apply a style (background with a gradient) on that row.

I tried to use rowspan on a table cell with colspan = number of total columns but that does not work.

Tried to use a nested table inside the main table header, but in that case the table background does not have the desired style.

Demo: http://jsfiddle.net/Debarupa/EyxkJ/3/

If you look at the demo, I need to have "Additional Info" and the column headers merged to a single row so that the style 'gridheader' can be applied to them as one row.

Ideas anyone? Thanks for any assistance in advance.

Upvotes: 0

Views: 1131

Answers (2)

sureshunivers
sureshunivers

Reputation: 1753

I have created a sample with nested table into table cell for the header.

Upvotes: 1

gkond
gkond

Reputation: 4274

Try using two different classes for top two rows you want to combine. Then break gradient onto two, for each of these rows with color changing 0-50% for the first one and 50-100% for the second one.

Here is the example: http://jsfiddle.net/EyxkJ/5/

Not sure if this is the most elegant solution though.

Upvotes: 1

Related Questions