I cannot get rid of this table border.
The initial HTML/CSS is from the ASP.NET MVC default.
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.
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.
Any guesses? I've googled around, but to no avail. I suppose it's something small I'm overlooking.
This question is related to
html
css
asp.net-mvc-3
The answer is
From your case, you need to set the border to none on <table> and <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>
Please try to add this into inside the table tag.
border="0" cellspacing="0" cellpadding="0"
<table border="0" cellspacing="0" cellpadding="0">
...
</table>
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:
cellspacing="0"
Use table style Border-collapse at the table level
border-spacing: 0; should work as well
.yourClass>tbody>tr>td{border: 1px solid #ffffff !important;}
This will do it with border-collapse
table{
border-collapse:collapse;
}
Try giving your table an ID and then using !important to set border to none in CSS. If JavaScript is tampering with your table then that should get around it.
<table id="mytable"
...
table#mytable,
table#mytable td
{
border: none !important;
}
To remove from all tables, (add this to the head or external style sheet)
<style type="text/css">
table td{
border:none;
}
</style>
Source: Stackoverflow.com