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

I'm trying to remove the border between the cell containing paper and the row that contains the menu table.

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

When I inspect the elements, I cannot find where the border is coming from. The containing td and tr both show a bottom-border of none, and the tr, td, table, tbody, and tr containing the menu show a border-top of none.

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

It would be helpful if someone can show where the border between the cell containing paper and the tr containing the menu is coming from, and how to get rid of it

如果有人能够显示包含纸张的单元格和包含菜单的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>

Here's what's going on in setTabs.

这是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();
    }
}

1 个解决方案

#1

Is this what you want?

这是你想要的吗?

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

I removed borders from different elements See code below:

我从不同元素中删除了边框请参阅以下代码:

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

#1