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

时间:2014-08-18 16:41:18

标签: javascript html css

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

FIDDLE

当我检查元素时,我无法找到边界的来源。包含tdtr的内容均显示无底边框,trtdtabletbody和{包含菜单的{1}}显示none的border-top。

如果有人能够显示包含纸张的单元格与包含菜单的tr之间的边界来自何处,以及如何摆脱它,将会很有帮助

tr

以下是setTabs中的内容。

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

1 个答案:

答案 0 :(得分:0)

这是你想要的吗?

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>