-
-
Generating HTML tables with rowspan’s can be a tricky business. I recently worked on a some XSLT that was transforming some data into an html table. As you can see from the sample below its sort of a tree grid.
The problem with rowspans are that when you expand and collapse (hide and show rows) the table displays incorrectly.Also changing the rowspan when expanding and collapsing to ensure that it displays correctly is virtually impossible.
I figured out a trick to create virtual rowspans that will seem that the cell spans multiple rows. The only downside here is that the merged cell cannot be aligned to the middle of the cell, but is always top aligned.
So basically the trick is to specify the following:
First specify that the table borders should collapse.
1: #table1
2: {
3: border-color: Silver;
4: border: solid 1px silver;
5: border-bottom: solid 1px silver;
6: border-collapse: collapse;
7: width: 600px;
8: font-family: Calibri;
9: font-size: smaller;
10: }
Then for the table cell’s and headers. Notice that the bottom border is 0px.
1: #table1 td, #table1 th
2: {
3: border: solid 1px silver;
4: border-bottom: none 0px;
5: padding-left: 2px;
6: }
Then finally we need to specify the style class for an empty cell.
1: #table1 td.emptycell
2: {
3: border: 0px;
4: }
And here’s a Screenshot of the table. You can view the source here
