jquery数据表边框问题答案

【问题标题】：jquery datatable border issuejquery数据表边框问题
【发布时间】：2013-12-30 15:20:10
【问题描述】：

如何显示空单元格的边框？有些列是空白的，没有值，所以这些列没有显示边框和它的空白。请看下面的屏幕截图并建议。

还有就是有两条边线，怎么做成一条边线？

HTML

<table border="1"  id="products1" style="width:750px" >   
        <thead>
            <tr>
                <th>End Date</th>
                <th>Modify Date</th>
                <th>Comments</th>
                <th>By Who</th>
               </tr>
        </thead>
        <tbody></tbody>
    </table>

oTable = $("#products1").dataTable({
       "aaData": newarray, 
       "bProcessing": true,
       "bDeferRender": true,
       "bFilter": true,
       "bRetrieve": true,
       "bPaginate": true,
       "bJQueryUI": true,
       "iDisplayLength": 5,

       "sPaginationType": "two_button",
       "sDom": 'T<"clear">frtip',
        "aoColumns": [{"sWidth": "135px","sClass": "center","bSortable": true},{
            "sWidth": "145px","sClass": "center","bSortable": true},{
            "sWidth": "145px","sClass": "center","bSortable": true},{
            "sWidth": "20px","sClass": "center","bSortable": false}

            ],
        "aoColumnDefs": [{ "fnRender": function (o, val) {
            return o.aData[0];
        },
            "sClass": "end date","aTargets": [0]
    }, {
        "fnRender": function (o, val) {

            return o.aData[1];
        },
            "sClass": "modified date","aTargets": [1]
    }, {
    "fnRender": function (o, val) {

            return o.aData[2];
        },
            "sClass": "comments","aTargets": [2]
    },{
    "fnRender": function (o, val) {

            return o.aData[3];
        },
            "sClass": "By who","aTargets": [3]
    }
    ]

});

【问题讨论】：

问题出在不是吗？那么它的代码在哪里呢？
看起来您在没有价值的情况下遗漏了<td>。除非你这样调整 colspan 是无效的
显示创建图像显示的 tbody 行 html

【解决方案1】：

提供的示例不正确，HTML & JS 中的表名不匹配，还请提供示例数组 "aaData": newarray 以复制您的确切问题。

当我使用自己的示例数组时，它工作正常，

oTable = $("#products1").dataTable({
    "aaData": [
        ["2013-01-01", "2013-01-01", "", "user1"],
        ["2013-01-01", "2013-01-01", "", "user1"],
        ["2013-01-01", "2013-01-01", "hello", "user1"]
     ]

对于第二个问题，使用 CSS 属性 - border-collapse: collapse,

<table border="1" id="products1" style="width: 750px;border-collapse: collapse">

【讨论】：

太棒了，它按预期工作。添加 border-collapse: collapse 后，我得到了空单元格的边框。

【解决方案2】：

您必须为空单元格添加<td />。你不能只是放下标签。

【讨论】：

你是这样说的吗？结束日期修改日期评论作者
没有。问题在内部，而不是在内部。看到这个。 jsfiddle.net/LS4vN/2

【解决方案3】：

在检查表格 css 时，您可能会发现以下内容

table {
    empty-cells: hide;
}

更改或覆盖它：

table {
    empty-cells: show;
}

瞧，所有的边框都显示出来了，也适用于空单元格..

【讨论】：