從單個表格單元格刪除邊框底部

Question

我正在嘗試刪除包含紙張的單元格和包含菜單表的行之間的邊界。

小提琴

當我檢查元素時，找不到邊界來自哪里。 含td和tr都顯示沒有任何的底邊框和tr ， td ， table ， tbody和tr包含菜單顯示任何的邊框頂部。

如果有人可以顯示包含紙張的單元格和包含菜單的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>