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

DataTables FixedColumns extension - extra border on top-left cell

本文关键字:边框 单元格 FixedColumns 扩展名 左上角 DataTables      更新时间:2023-09-26

我正在为jQuery使用DataTables插件的FixedColumns扩展。我想创建这里示例中所示表格的精确副本,但替换我的数据:

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

我检查了页面上的源代码&我对API进行了广泛的研究,试图理解这个问题:固定列(最左边)向下移动了整整1px,当我单击左上角的单元格按固定列的标题排序时,单元格周围会出现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。这是一个小问题,但它让我抓狂。我试着标准化了收割台的高度,它仍然是偏移的。我已经尝试添加边框底部:0px;到用于扩展&这也没有改变。

我有一种预感,这与FixedColumns的"sHeightMatch"属性有关。我在FixedColumns声明中使用了显式半自动,结果是一样的(我相信这是默认的)。我还测试了自动和无,由于某种原因,行匹配比半自动差得多——它们完全是锯齿状的。

这只是这个插件扩展所能做的最好的吗?我不知道代码的哪一部分在鼠标点击事件上注册了边框。也许我对此无能为力-这也很好,我会保持原样-但我真的很好奇这件事是如何工作的,尤其是因为网站上的主要示例似乎没有这个问题,但我的代码与他们的代码匹配(尽我所能)。

啊哈!我解决了。写下这个问题能帮你想清楚,真是太神奇了。

在更仔细地查看了该示例中的源代码后,我注意到有一个部分表示页脚,直接在后面。当我包括它&取而代之的是一条小的纯色条纹,它把所有东西都排成一排。

就像这样:

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