How to handle colspan in tbody combined with fixed header

pmeems

I'm trying to use DataTables because of the fixed header option.
I've got it working fine until I add a colspan to one of the cells in my row.
Then I loose the fixed header and the scroll height.

My data is repeating 3 rows. The first row needs a colspan on the 3rd cell, the second row is 'normal' and the third row needs a colspan on the 2nd cell.

Is this possible? Do I need additional settings, plug-ins or .. ?

tangerine

DataTables does not support colspan in tbody. There are several posts in here to that effect.

gyrocode

DataTables does not support colspan directly. However there is a trick to make colspan attribute work.

You need to have td element for every cell. Then add colspan attribute to the required cell. If cell spans X columns, then add style="display:none" to (X-1) cells that follow that cell.

For example:

<tr>
   <td>Tiger Nixon</td>
   <td>System Architect</td>
   <td colspan="2">Edinburgh</td>
   <td style="display:none"></td>
   <td>2011/04/25</td>
   <td>$320,800</td>
</tr>

See this example for code and demonstration.

There is also a way to add support for rowspan, see jQuery DataTables: ROWSPAN in table body TBODY.

---

See more articles about jQuery DataTables on gyrocode.com.