javascript - 从单个表格单元格中删除边框底部

Question

我正在尝试删除包含纸张的单元格和包含菜单表的行之间的边框。

FIDDLE

当我检查元素时，我无法找到边框的来源。包含的 td 和 tr 都显示 none 的底边框，而 tr, td, table、tbody 和包含菜单的 tr 显示 border-top of none。

如果有人可以显示包含纸张的单元格和包含菜单的 tr 之间的边界来自何处，以及如何摆脱它，这将很有帮助

<table style="border-collapse:collapse; border-spacing: 0">
    <tr>
        <td style="border-bottom: 2px solid gray">&nbsp;&nbsp;&nbsp;</td>
        <td style="border-left: 2px solid gray; border-top: 2px solid gray; border-right:2px solid gray" id="PaperInfoTab"><a onclick="setTabs('Paper')" >Paper</a></td>
        <td style="border-left: 2px solid gray; border-top: 2px solid gray; border-right:2px solid gray" id="EDIInfoTab"><a onclick="setTabs('EDI')">EDI</a></td>
    </tr>
    <tr style="border-top:none">
        <td colspan="3" style="border-left: 2px solid gray; border-bottom: 2px solid gray; border-right:2px solid gray; border-top: none">
            <table style="border-top: none">
                <tbody style="border-top:none">
                    <tr style="border-top: none">
                        <td style="color: blue; border-top:none">Dashboard</td>
                        <td style="border-left: 2px solid gray; border-top: none"><a href="/EdiClaim/Index" target="_blank" style="color: gray">Edi Claims</a> </td>
                        <td style="border-left: 2px solid gray; border-top: none"><a href="/PaperClaim/Index" target="_blank" style="color: gray">Paper Claims</a> </td>
                        <td style="border-left: 2px solid gray; border-top: none"><a href="/Dashboard/Details" target="_blank" style="color: gray">Details</a></td>
                        <td style="border-left: 2px solid gray; border-top: none"><a href="/Utilities/Index" target="_blank" style="color: gray">Utilities</a></td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
</table>

这是 setTabs 中发生的事情。

function setTabs(activetab)
{
    if (activetab == 'Paper') {
        $("#PaperInfoTab").css({ 'color': 'blue','border-bottom': 'none'  });
        $("#EDIInfoTab").css({ 'color': "black", 'border-bottom': '2px solid gray' });
        $("#PaperInfo").css({ 'color': 'blue', 'visibility': 'visible'});
        $("#EdiInfo").css({ 'visibility': 'hidden', });
        $("#EdiInfo").hide();
        $("#PaperInfo").show();
    }
    if (activetab == 'EDI') {
        $("#PaperInfoTab").css({ 'color': 'black', 'border-bottom': '2px solid gray' });
        $("#EDIInfoTab").css({ 'color': "blue", 'border-bottom': 'none' });
        $("#EdiInfo").css({ 'color': 'blue', 'visibility': 'visible'});
        $("#PaperInfo").css({ 'visibility': 'hidden'});
        $("#EdiInfo").show();
        $("#PaperInfo").hide();
    }
}

Answer 1

这是你想要的吗？

http://jsfiddle.net/y0bpgd8t/1/

我删除了不同元素的边框，请参见下面的代码:

<table style="border-collapse:collapse; border-spacing: 0">
    <tr>
        <td style="">&nbsp;&nbsp;&nbsp;</td>
        <td style="" id="PaperInfoTab"><a onclick="setTabs('Paper')" >Paper</a></td>
        <td style="" id="EDIInfoTab"><a onclick="setTabs('EDI')">EDI</a></td>
    </tr>
    <tr style="border-top:none">
        <td colspan="3" style="">
            <table style="border-top: none">
                <tbody style="border-top:none">
                    <tr style="border-top: none">
                        <td style="color: blue; border-top:none">Dashboard</td>
                        <td style="border-left: 2px solid gray; border-top: none"><a href="/EdiClaim/Index" target="_blank" style="color: gray">Edi Claims</a> </td>
                        <td style="border-left: 2px solid gray; border-top: none"><a href="/PaperClaim/Index" target="_blank" style="color: gray">Paper Claims</a> </td>
                        <td style="border-left: 2px solid gray; border-top: none"><a href="/Dashboard/Details" target="_blank" style="color: gray">Details</a></td>
                        <td style="border-left: 2px solid gray; border-top: none"><a href="/Utilities/Index" target="_blank" style="color: gray">Utilities</a></td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
</table>