DataTables FixedColumns扩展名-左上角单元格上的额外边框
DataTables FixedColumns extension - extra border on top-left cell
我正在为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>
- 使用jquery在单击时在单元格中输入值
- CSS-若窗口太小,滚动条会出现在“表格”单元格上
- 可以'我不明白为什么;t将行和单元格添加到表中
- 如何在Angular中的表的所有单元格中添加链接
- 表中单元格的总和
- ExtJS网格单元格编辑器,防止焦点松动问题
- 有没有一种方法可以仅使用HTML/CSS来隐藏基于特定值的数据单元格
- 区分电子表格中的空单元格和0值
- ui网格将单元格显示为选择标记
- 单元格的工具提示或标题不显示超过2000个字符
- ui网格日期单元格过滤器,过滤日期格式导致显示错误的日期
- 允许表单元格内容水平展开
- jQuery UI可排序-排序时表格单元格丢失边框
- 边框折叠时未正确复制单元格宽度属性
- DataTables FixedColumns扩展名-左上角单元格上的额外边框
- 文本angular不会在angularjs中加载单元格边框
- 从单个表格单元格移除边框底部
- 根据选择高亮显示单元格边框(活动单元格)
- 单击时高亮显示单元格边框颜色,单击时改回其他颜色
- 动态地形成网格,有条件地显示单元格的底边框