从单个表格单元格移除边框底部

Remove border bottom from single table cell

本文关键字:边框 底部 单元格 单个 表格      更新时间:2023-09-26

我试图删除包含纸张的单元格和包含菜单表的行之间的边界。

小提琴

当我检查元素时,我找不到边界来自哪里。包含菜单的tdtr的下边框均为none,包含菜单的trtdtabletbodytr的上边框均为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();
    }
}

这是你想要的吗?

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>