Responsive not moving column header

Responsive not moving column header

ZxurianZxurian Posts: 26Questions: 6Answers: 0

This may be related to https://datatables.net/forums/discussion/32456/complex-headers-responsive-not-working-anymore#latest since I am using what could be considered complex headers, but just to be sure, I figured I'd ask.

Desktop view: http://i.imgur.com/PlmUcVy.png
1st Breakpoint view: http://i.imgur.com/qrpsWox.png

While it's correctly breaking the columns and moving that column data into the collapsible section, as well as hiding the the column headers, the first row of column headers, "Designated Data" is stretching father than it should, as the "Actions" header should be over the last column , not off to the side.

HTML

<table id="table_researchList" class="table table-striped table-hover table-condensed" style="display: none;">
    <thead>
        <tr>
            <th rowspan="2"><i class="icon-fw <?php echo IconList::get('info'); ?>"></i><i id="i_statusHelp" class="<?php echo IconList::get('help'); ?>"></i></th>
            <th rowspan="2">Title</th>
            <th rowspan="2" class="min-bootstrapLg">Contributor/s</th>
            <th colspan="7">Designated Data</th>
            <th rowspan="2">Actions</th>
        </tr>
        <tr>
            <th>Format</th>
            <th class="min-bootstrapLg">Page Count</th>
            <th class="min-bootstrapLg">List Price</th>
            <th>Bestseller Rank</th>
            <th>Best Category</th>
            <th class="min-bootstrapLg">Publisher</th>
            <th class="min-bootstrapLg">Publish Date</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

Javascript

        .dataTable({
            'responsive': true,
            'columns': [
                { data: 'status', className: 'booklistStatus', defaultContent: '', width: '35px', responsivePriority: 1 },
                { data: 'title', responsivePriority: 2 },
                { data: 'contributors', className: 'booklistContributors', width: '200px', responsivePriority: 7 },
                { data: 'productForm', className: 'productForm', width: '80px', orderable: false, responsivePriority: 4 },
                { data: 'pageCount', className: 'alignRight', width: '42px', responsivePriority: 9 },
                { data: 'listPrice', className: 'alignRight', width: '56px', responsivePriority: 8 },
                { data: 'bestsellerRank', className: 'booklistRank', width: '80px', responsivePriority: 5 },
                { data: 'bestCategory', className: 'booklistBestCategory', width: '300px', orderable: false, responsivePriority: 6 },
                { data: 'publisher', width: '200px', responsivePriority: 10 },
                { data: 'publish_date', width: '53px', responsivePriority: 11 },
                { data: 'actions', className: 'booklistActions', orderable: false, defaultContent: '', width: '55px', responsivePriority: 3 }
            ],
...
This discussion has been closed.