Jquery 单元格为空的表格行不显示边框

我有一个动态填充数据的表。这是在ASP.NETMVC中实现的

该表包含3个附加了数据的

元素，然后我在脚本标记中添加了一些jQuery，将最终边框添加到tbody元素中。每个tbody元素中有2行，第一行完全为空，用于将tobdy元素彼此隔开，然后第二行在一个单元格中有一个复选框，旁边有一些文本

该表有4列宽，第2行最右边的2个单元格为空。我试图通过向行添加边框来在

周围添加边框。我尝试了网上搜索的其他方法，但这是我能找到的最接近的方法

基本上，我的桌子是这样的（边上的边框是连续的）

每一行上都有左边框和右边框，最后一行上有左边框、右边框和下边框。顶行将有左、右和上边框，但右边框不显示

以下是html代码：

<table id="workbookTable_@wb.WorkBookId" cellpadding="20" style="border-collapse: collapse">
    <thead>
        <tr>
            <th><input type="checkbox" id="@wb.WorkBookId _SelectAllCheckbox"/></th><th>Timepoint</th><th>Information</th><th>Notifications/Errors</th><th>Preview</th>
        </tr>
    </thead>
    <tbody id="@wb.WorkBookId _ErrorVisits">
        <tr><td></td><td></td><td></td><td></td></tr>
        <tr style="border-top: 2px solid black; border-left: 2px solid black; border-right: 2px solid black"><td><input type="checkbox" id="@wb.WorkBookId _ErrorCheckbox"/></td><td><b>Visits in Error</b></td><td>&nbsp;</td><td style="border-right: 2px solid black">&nbsp;</td></tr>
    </tbody>
    <tbody id="@wb.WorkBookId _NotPreviouslySQCvisits">
        <tr><td></td><td></td><td></td><td></td></tr>
        <tr style="border-top: 2px solid black; border-left: 2px solid black; border-right: 2px solid black"><td><input type="checkbox" id="@wb.WorkBookId _NotSQCCheckbox"/></td><td><b>First Time Visits</b></td><td>&nbsp;</td><td style="border-right: 2px solid black">&nbsp;</td></tr>
    </tbody>
    <tbody id="@wb.WorkBookId _PreSQCvisits">
        <tr><td></td><td></td><td></td><td></td></tr>
        <tr style="border-top: 2px solid black; border-left: 2px solid black; border-right: 2px solid black"><td><input type="checkbox" id="@wb.WorkBookId _PreSQCCheckbox"/></td><td><b>Previously Visits</b></td><td>&nbsp;</td><td style="border-right: 2px solid black">&nbsp;</td></tr>
    </tbody>
        <!-- Loop through each visit collection to place each SQC ready visit in the desired location -->
        @{
            // Razor code to dynamically add rows to tbody elements

            <script type="text/javascript">
                if ($("#workbookTable_@wb.WorkBookId > tbody:nth-child(2)").children().length < 3) {
                    //$("#workbookTable_@wb.WorkBookId > tbody:nth-child(2)").remove();
                    $("#workbookTable_@wb.WorkBookId > tbody:nth-child(2)").hide();
                } else {
                    $("#workbookTable_@wb.WorkBookId > tbody:nth-child(2) > tr:gt(0)").css({ "border-left": "2px solid black", "border-right": "2px solid black" });
                }

                if ($("#workbookTable_@wb.WorkBookId > tbody:nth-child(3)").children().length < 3) {
                    //$("#workbookTable_@wb.WorkBookId > tbody:nth-child(3)").remove();
                    $("#workbookTable_@wb.WorkBookId > tbody:nth-child(3)").hide();
                } else {
                    $("#workbookTable_@wb.WorkBookId > tbody:nth-child(3) > tr:gt(0)").css({ "border-left": "2px solid black", "border-right": "2px solid black" });
                }

                if ($("#workbookTable_@wb.WorkBookId > tbody:nth-child(4)").children().length < 3) {
                    //$("#workbookTable_@wb.WorkBookId > tbody:nth-child(4)").remove();
                    $("#workbookTable_@wb.WorkBookId > tbody:nth-child(4)").hide();
                } else {
                    $("#workbookTable_@wb.WorkBookId > tbody:nth-child(4)  > tr:gt(0)").css({ "border-left": "2px solid black", "border-right": "2px solid black" });
                }

                $("#workbookTable_@wb.WorkBookId > tbody:nth-child(2) > tr:last").css({ "border-bottom": "2px solid black" });
                $("#workbookTable_@wb.WorkBookId > tbody:nth-child(3) > tr:last").css({ "border-bottom": "2px solid black" });
                $("#workbookTable_@wb.WorkBookId > tbody:nth-child(4) > tr:last").css({ "border-bottom": "2px solid black" });
            </script>
        }
</table>

时间点信息通知/错误查看
错误访问
首次访问
以前的访问
@{
//Razor代码，用于向tbody元素动态添加行
if（$（“#workbookTable@wb.WorkBookId>t正文：第n个子项（2）”）.children（）.length<3）{
//$（“#workbookTable@wb.WorkBookId>t正文：第n个子项（2）”）.remove（）；
$（“#workbookTable@wb.WorkBookId>t正文：第n个子项（2）”）.hide（）；
}否则{
$（“#workbookTable_wb@wb.WorkBookId>tbody:nth child（2）>tr:gt（0）”）.css（{“左边框”：“2px纯黑”，“右边框”：“2px纯黑”}）；
}
if（$（“#workbookTable@wb.WorkBookId>t正文：第n个子项（3）”）.children（）.length<3）{
//$（“#workbookTable@wb.WorkBookId>t正文：第n个子项（3）”）.remove（）；
$（“#workbookTable@wb.WorkBookId>t正文：第n个子项（3）”）.hide（）；
}否则{
$（“#workbookTable_wb@wb.WorkBookId>tbody:nth child（3）>tr:gt（0）”）.css（{“左边框”：“2px纯黑”，“右边框”：“2px纯黑”}）；
}
if（$（“#workbookTable@wb.WorkBookId>t正文：第n个子项（4）”）.children（）.length<3）{
//$（“#workbookTable@wb.WorkBookId>t正文：第n个子项（4）”）.remove（）；
$（“#workbookTable@wb.WorkBookId>t正文：第n个子项（4）”）.hide（）；
}否则{
$（“#workbookTable_wb@wb.WorkBookId>tbody:nth child（4）>tr:gt（0）”）.css（{“左边框”：“2px纯黑”，“右边框”：“2px纯黑”}）；
}
$（“#workbookTable@wb.WorkBookId>tbody:nth child（2）>tr:last”）.css（{“边框底部”：“2px纯黑”}）；
$（“#workbookTable@wb.WorkBookId>tbody:nth child（3）>tr:last”）.css（{“边框底部”：“2px纯黑”}）；
$（“#workbookTable@wb.WorkBookId>tbody:nth child（4）>tr:last”）.css（{“边框底部”：“2px纯黑”}）；
}

我怎样才能让边境出现

如果需要更多的细节，请告诉我

我在IE9和chrome中都测试了它，它们都显示了相同的东西。

尝试添加以下内容：

$("#workbookTable_@wb.WorkBookId td").each(function(){
   if($(this).text() === ''){
     $(this).html(' ')
   }
});

---

在某些浏览器中，如果没有内容，空的

会崩溃，因此可以将类似

-

的内容放在那里，也可以将非中断空间

放在那里，告诉

不要崩溃。

我仔细研究了代码，找到了一个解决方案

在我的表中，我刚刚添加了另一个带有

的空单元格

原件

：

错误访问

新的

：

错误访问

---

可能不是最好的解决方案，但目前它仍然有效。

不幸的是，我必须将

边框折叠

属性设置为

折叠

，才能在行上显示边框。我确实看到使用了

，并将其添加到一些空单元格中，这没有什么区别。

$("#workbookTable_@wb.WorkBookId td").each(function(){
   if($(this).text() === ''){
     $(this).html(' ')
   }
});

<tbody id="@wb.WorkBookId _ErrorVisits">
        <tr><td></td><td></td><td></td><td></td></tr>
        <tr style="border-top: 2px solid black; border-left: 2px solid black; border-right: 2px solid black"><td><input type="checkbox" id="@wb.WorkBookId _ErrorCheckbox"/></td><td><b>Visits in Error</b></td><td>&nbsp;</td><td style="border-right: 2px solid black">&nbsp;</td></tr>
    </tbody>

<tbody id="@wb.WorkBookId _ErrorVisits">
        <tr><td></td><td></td><td></td><td></td></tr>
        <tr style="border-top: 2px solid black; border-left: 2px solid black; border-right: 2px solid black"><td><input type="checkbox" id="@wb.WorkBookId _ErrorCheckbox"/></td><td><b>Visits in Error</b></td><td>&nbsp;</td><td>&nbsp;</td><td style="border-right: 2px solid black">&nbsp;</td></tr>
    </tbody>