Html 去除表格边框

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6290081/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 09:02:01  来源:igfitidea点击:

removing table border

htmlcssasp.net-mvc-3

提问by micahhoover

I cannot get rid of this table border.

我无法摆脱这个表格边框。

The initial HTML/CSS is from the ASP.NET MVC default.

初始 HTML/CSS 来自 ASP.NET MVC 默认。

I removed a lot of code and added a table on top.

我删除了很多代码并在顶部添加了一个表格。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
</head>
<body>

    <div class="page">

            <table border=0 width=1000 style="border-collapse:collapse;" cellspacing="0" cellpadding="0">
                <tr>
                    <td rowspan=2>
                        <img src="/Content/Images/elk_banner.jpg" />
                    </td>
                    <td>
                        <div id="logindisplay">
                        @Html.Partial("_LogOnPartial")
                        </div>
                    </td>
                </tr>
            </table>

        <section id="main">
            @RenderBody()
        </section>
        <footer>
        </footer>
    </div>
</body>
</html>

I've tried commenting out ALL the CSS, but I can't get rid of it.

我试过注释掉所有的 CSS,但我无法摆脱它。

My only guess is that one of the cryptic .js files is interferring with it. Or one of these exotic HTML containers is doing it.

我唯一的猜测是其中一个神秘的 .js 文件正在干扰它。或者这些异国情调的 HTML 容器之一正在这样做。

Any guesses? I've googled around, but to no avail. I suppose it's something small I'm overlooking.

有什么猜测吗?我已经谷歌搜索,但无济于事。我想这是我忽略的小东西。

采纳答案by George Katsanos

Use Firebug to inspect the table in question, and see where does it inherit the border from. (check the right column). Try setting on-the-fly inline style border:none; to see if you get rid of it. Could also be the browsers default stylesheets. In this case, use a CSS reset. http://developer.yahoo.com/yui/reset/

使用 Firebug 检查有问题的表格,看看它从哪里继承边框。(检查右栏)。尝试设置动态内联样式边框:无;看看你是否摆脱了它。也可能是浏览器的默认样式表。在这种情况下,请使用 CSS 重置。http://developer.yahoo.com/yui/reset/

回答by Marty

Try giving your table an ID and then using !importantto set borderto nonein CSS. If JavaScript is tampering with your table then that should get around it.

尝试为您的表提供一个 ID,然后在 CSS 中使用!importantto 设置bordernone。如果 JavaScript 正在篡改您的表格,那么应该可以绕过它。

<table id="mytable"
...

table#mytable,
table#mytable td
{
    border: none !important;
}

回答by Chathuranga Jayanath

Please try to add this into inside the table tag.

请尝试将其添加到 table 标签内。

border="0" cellspacing="0" cellpadding="0"

border="0" cellpacing="0" cellpadding="0"

<table  border="0" cellspacing="0" cellpadding="0">
...
</table>

回答by David Leegwater

This will do it with border-collapse

这将与 border-collapse

table{
    border-collapse:collapse;
}

回答by robasta

To remove from all tables, (add this to the head or external style sheet)

要从所有表中删除,(将此添加到头部或外部样式表)

<style type="text/css">
table td{
border:none;
}
</style>

The image shows where the style is coming from (Firebug)

该图像显示了样式的来源(Firebug)

回答by Guyfrala

Most of the time your background color is different from the background of your table. Since there are spaces between the cells, those spaces will create the illusion of lines with the color of the background behind the table.

大多数情况下,您的背景颜色与表格的背景不同。由于单元格之间有空间,这些空间会产生线条的错觉,与桌子后面的背景颜色相同。

The solution is to get rid of those spaces.

解决方案是摆脱这些空间。

Inside the table tag write:

在 table 标签内写:

cellspacing="0"

回答by Fussell

Use table style Border-collapse at the table level

在表格级别使用表格样式边框折叠

回答by blaisck

From your case, you need to set the border to none on <table>and <td>tags.

根据您的情况,您需要将边框设置为 none on<table><td>tags。

    <table width=1000 style="border:none; border-collapse:collapse; cellspacing:0; cellpadding:0" >
        <tr>
            <td style="border:none" rowspan=2>
                <img src="/Content/Images/elk_banner.jpg" />
            </td>
            <td style="border:none">
                <div id="logindisplay">
                    @Html.Partial("_LogOnPartial")
                </div>
            </td>
        </tr>
    </table>

回答by pr0tipZ

border-spacing: 0;should work as well

border-spacing: 0;也应该工作

回答by Poramate Srisawat

.yourClass>tbody>tr>td{border: 1px solid #ffffff !important;}