DataTables FixedColumns 扩展 - 左上角单元格上的额外边框答案

【问题标题】：DataTables FixedColumns extension - extra border on top-left cellDataTables FixedColumns 扩展 - 左上角单元格上的额外边框
【发布时间】：2014-08-27 06:45:04
【问题描述】：

我正在使用 jQuery 的 DataTables 插件的 FixedColumns 扩展。我想创建此处示例中显示的表的精确副本，但替换我的数据：

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

我检查了页面上的源代码并广泛研究了 API 以试图理解这个问题：固定列（最左边）向下移动了 1 px，当我单击左上角的单元格进行排序时我的固定列的标题，单元格周围出现一个 1px 的边框。

我在扩展文档中给出的几个示例中看到了同样的情况。

这是我的初始化：

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

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

这是影响我的表格的唯一 CSS：

.display {
    font-size: 85%;
}

.display tr {
    text-align: center;
}

.display th {
    color: white;
}

表格中填充了 ColdFusion，但这无关紧要...无论如何我都会展示它：

<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>

现在，这里是整个事物的 JSFiddle，其中包含相同构造的示例数据。

http://jsfiddle.net/k5h74fqo/

我不明白为什么额外的像素底部边框会将整个左列向下移动 1px。这是一个小问题，但它让我发疯。我试过标准化标题高度，它仍然偏移。我试过添加border-bottom: 0px;到扩展的包含的 CSS & 也没有改变。

我有一种预感，这与 FixedColumns 的“sHeightMatch”属性有关。我已经将它包含在 FixedColumns 声明中，显式为 semiauto，它是相同的结果（我相信这是默认值。）我还测试了 auto 和 none，并且由于某种原因，行匹配比 semiauto 差得多 - 它们是完全锯齿状。

这只是这个插件扩展所能做的最好的吗？我对代码的哪一部分注册了鼠标单击事件的边框感到困惑。也许我对此无能为力 - 这也很好，我会保持原样 - 但我真的很好奇它是如何工作的，特别是因为网站上的主要示例似乎没有问题，但是我的代码与他们的匹配（据我所知）

【问题讨论】：

标签： javascript jquery coldfusion datatables

【解决方案1】：

啊哈！我解决了。令人惊讶的是，仅仅写出问题就可以帮助您思考问题。

在仔细查看了该示例中的源代码后，我注意到在 .当我加入它并用一个小的纯色条纹替换它时，它会将所有东西都衬起来。

像这样：

<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>

【讨论】：