Question

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

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

我检查了页面上的源代码＆amp;我已经广泛研究了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的CSS这也没有改变。

我有预感，它与＆＃34; sHeightMatch＆＃34; FixedColumns的属性。我已将它明确地包含在FixedColumns声明中，并且它是相同的结果（这是我相信的默认值。）我还测试了auto和none，并且由于某些原因行的匹配比semiauto差得多 - 他们＆＃39完全是锯齿状的。

这是这个插件扩展可以做的最好的吗？我很难知道代码的哪一部分在鼠标点击事件上注册了边框。也许我无能为力 - 这也很好，我会保持原样 - 但我真的很好奇它是如何工作的，特别是因为网站上的主要例子似乎没有问题，但我的代码与他们的代码匹配（我能说的最好。）

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

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

1 个答案: