DataTables FixedColumns extension - extra border on top-left cell

Question

I am using the FixedColumns extension of the DataTables plugin for jQuery. I'd like to create an exact copy of the table shown in the example here, but substituting my data:

http://www.datatables.net/extensions/fixedcolumns/

I checked the source code on the page & have studied the API extensively to try to understand this issue: the fixed column (far left) is shifted down by exactly 1 px, and when I click the top left cell to sort by the header of my fixed column, a 1px border appears around the cell.

I see the same thing occurring in several of the examples given in the extensions documentation.

Here is my initialization:

$(document).ready(function(){
    var table = $('#reportTable').DataTable({
        "scrollY": "500px",
        "scrollX": "100%",
        "scrollCollapse": true,
        "paging": false
    });

    new $.fn.dataTable.FixedColumns(table);
});

Here is the only CSS affecting my table:

.display {
    font-size: 85%;
}

.display tr {
    text-align: center;
}

.display th {
    color: white;
}

The table is populated with ColdFusion, but that shouldn't matter... I will show it anyway:

<table id="reportTable" class="display hover" cellspacing="0" width="100%">
<thead>
<tr>
    <th style="background-color: ##FF6600;">
        RACF
    </th>
    <cfloop list="#session.columnList#" index="i">
        <cfif i neq 'submit'>
            <th style="background-color: ##FF6600;">
                #Application.fields[i]['HEAD']#
            </th>
        </cfif>
    </cfloop>
</tr>
</thead>
<tbody>
<cfloop collection="#session.report#" item="row">
<cfset c = 1 />
    <tr>
        <td>
            #row#
        </td>
        <cfloop list="#session.columnList#" index="i">
            <cfset isEndCell = false />
            <cfif c eq obEnd || c eq ibEnd || c eq cbEnd>
                <cfset isEndCell = true />
            </cfif>
            <cftry>
                <td style="padding-bottom: 10px;">
                    #Application.fields[i]['PPND'] &
                        numberFormat
                        (
                            evaluate(Application.fields[i]['CALC']),
                            evaluate(Application.fields[i]['FMT'])
                        )
                    & Application.fields[i]['APND']#
                </td>
            <cfcatch>-</cfcatch>
            </cftry>
            <cfset c += 1 />
        </cfloop>
    </tr>
</cfloop>
</tbody>

Now, here is a JSFiddle of the whole thing with identically constructed sample data.

http://jsfiddle.net/k5h74fqo/

I can't understand why the extra pixel bottom border shifts the entire left column down 1px. It's a tiny little issue but it's driving me nuts. I've tried standardizing the header height, it it still offset. I have tried adding border-bottom: 0px; to the included CSS for the extension & that also makes no change.

I have a hunch it's got to do with the "sHeightMatch" attribute of FixedColumns. I have included it in the FixedColumns declaration with explicitly semiauto and it is the same result (that is the default I believe.) I have also tested auto and none, and the rows match up much worse than semiauto for some reason - they're totally jagged.

Is this just the best this plugin extension can do? I'm stumped as to what part of the code registers the border on the mouse click event. Maybe there's nothing I can do about it - that's fine too, I will leave it as is - but I'm really curious about how the thing works, especially since the main example on the site doesn't seem to have the issue, but my code matches theirs (to the best I can tell.)

Answer 1

Aha! I solved it. Amazing how just writing out the problem helps you think it through.

After looking more closely at the source code in that example, I noticed there was a section representing the footer, directly after the . When I included it & replaced it with a small, solid-colored stripe it lined everything right back up.

So like this:

<thead>
    <tr>
        <th>
            Stuff
        </th>
        <th>
            Goes
        </th>
        <th>
            Here
        </th>
    </tr>
</thead>
<tfoot>
    <tr>
        <th>

        </th>
        <th>

        </th>
        <th>

        </th>
    </tr>
</tfoot>
<tbody>
    ...
</tbody>