How to deal with tables with span?

Ludus

I found that DataTable plugin is nice, clean and fast but I can't find out solution for my problem: I have a table where header is consist of couple rowspans and colspans and then plugin for fixed header and 1-2 left column works well with common rows., But my table rows aren't plain rows but first column is rowspan and such table DT plugin doesn't recognize: no slider, like JS doesn't works! How to deal with it?

<table id="example" class="stripe row-border order-column" cellspacing="0" width="100%">
    <tbody>             
    <tr>
    <th rowspan="2" scope="col">CITY</th>
    <th rowspan="2" scope="col">YP</th>
    <th colspan="3" scope="col">MORNING</th>
    <th colspan="3" scope="col">DAY</th>
    <th colspan="3" scope="col">NIGHT</th>
    </tr>
    <tr>
    <td>Temp</td>
    <td>Sun</td>
    <td>Wind</td>
    <td>Temp</td>
    <td>Sun</td>
    <td>Wind</td>
    <td>Temp</td>
    <td>Sun</td>
    <td>Wind</td>
    </tr>
    <tr>
    <th rowspan="2" scope="col">Name of city 1</th>
    <td>I</td>
    <td>80</td>
    <td>Y</td>
    <td>N</td>
    <td>90</td>
    <td>Y</td>
    <td>N</td>
    <td>96</td>
    <td>N</td>
    <td>Y</td>
    </tr>
    <tr>
    <td>II</td>
    <td>94</td>
    <td>Y</td>
    <td>N</td>
    <td>96</td>
    <td>Y</td>
    <td>N</td>
    <td>98</td>
    <td>N</td>
    <td>Y</td>
    </tr>
    <th rowspan="2" scope="col">Name of city 2</th>
    <td>I</td>
    <td>77</td>
    <td>N</td>
    <td>N</td>
    <td>80</td>
    <td>Y</td>
    <td>Y</td>
    <td>88</td>
    <td>N</td>
    <td>Y</td>
    </tr>
    <tr>
    <td>II</td>
    <td>80</td>
    <td>Y</td>
    <td>Y</td>
    <td>82</td>
    <td>Y</td>
    <td>Y</td>
    <td>87</td>
    <td>N</td>
    <td>Y</td>
    </tr>
    </tbody>
    </table>

<style>
/* Ensure that the demo table scrolls */
    th, td { white-space: nowrap; }
    div.dataTables_wrapper {
        width: 640px;
        margin: 0 auto;
    }
</style>




$(document).ready(function() {
    var table = $('#example').DataTable( {
        scrollY:        "300px",
        scrollX:        true,
        scrollCollapse: true,
        paging:         false,
        fixedColumns:   {
            leftColumns: 2,
            rightColumns:0
        }
    } );
} );

Is there some way to deal such rows and in same time to get working DT plugin with fixed left columns and header? Thanks.

allan

Thanks for your question - however, per the forum rules can you link to a test case showing the issue please. This will allow the issue to be debugged.

Information on how to create a test page, if you can't provide a link to your own page can be found here.

Thanks,
Allan