带有空单元格的表格行不显示边框

Question

我有一个动态填充数据的表。这是在 ASP.Net MVC 中。

该表包含 3 个 <tbody> 元素，其中附加了数据，然后我在脚本标记中有一些 jQuery，将最终边框添加到 tbody 元素。每个 tbody 元素有 2 行，第一行完全是空的，用来隔开 tobdy 元素，然后第二行在一个单元格中有一个复选框，旁边有一些文本。

表格有 4 列宽，第 2 行最右边的 2 个单元格为空。我正在尝试通过向行添加边框来在 <tbody> 周围添加边框。我尝试了我在网上搜索的其他方法，但这是我能得到的最接近的方法。

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

_________________________________________________________
|                                                                     |

|                                                                     |

|_____________________________________________________________________|

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

这里是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>

如何让边框显示出来？

如果需要更多详细信息，请告诉我。

我在 IE9 和 chrome 中都对其进行了测试，它们都显示相同的内容。

Answer 1

尝试添加这个：

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

在某些浏览器中，如果没有内容，空的 <td>s 往往会折叠，所以要么放像 - 这样的东西，或者你可以在其中放置非破坏空间   告诉 <td>s 不要折叠。

Answer 2

我玩弄了代码并找到了解决方法/解决方案。

在我的表格中，我刚刚添加了另一个带有  的空单元格。

原<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 style="border-right: 2px solid black">&nbsp;</td></tr>
    </tbody>

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

可能不是最好的解决方案，但现在可以。