grey border surrounding image - html

Question

I have a Bootstrap table on the view and the last 2 columns are images. I load the table once the Ajax call is successful.
Issue
when table id populated with data, I see grey border and nothing makes sense. I don't have any code which specifies border.
Below is my CSS Code
img {
border:none;
}
table {
border-collapse:collapse;
}
.assign {
background: url(Images/user_not_assigned.png) no-repeat;
width:100%;
height:40px;
}
I added blue dashed border to the image to make sure it overrides. I see the blue dashed border along with grey border
CSS
img {
border : 2px blue dashed;
border-radius:10px;
padding:5px;
}
table {
border-collapse:collapse;
}
.assign {
background: url(Images/user_not_assigned.png) no-repeat;
width:100%;
height:40px;
}
HTML View:
<div id="getorder" class="table-responsive" data-request-url="#Url.Action("GetPendingOrders", "Main")">
<table id="editorder" class="table table-striped table-hover">
<caption><h4 class="chocolatetext"><strong>Pending / Assigned Orders</strong></h4></caption>
<thead>
<tr>
<th>COL1 #</th>
<th>COL2 #</th>
<th>COL3 #</th>
<th>Assign</th>
<th>Update</th>
</tr>
</thead>
<tbody id="assignorder" data-request-url="#Url.Action("AssignOrder", "Main")">
</tbody>
</table>
</div>
#Scripts.Render("~/Scripts/Custom/main.js")
Jquery Code to load table
$.ajax({
type: 'GET',
url: peningorderurl,
traditional: true,
cache: false,
success: function (data) {
var table = $("table");
table.find("tr:gt(0)").remove(); //remove all previous rows if needed
$.each(data, function (index, element) {
var tr = $("<tr class='clickable-row' data-href=" + element.id + " data-row=" + element.orderno + "></tr>");
table.append(tr);
var td = $("<td>" + element.id + "</td>");
tr.append(td);
var td = $("<td class='testno'>" + element.testno + "</td>");
tr.append(td);
var td = $("<td class='screenno'>" + element.screenno + "</td>");
tr.append(td);
var assignimage = ('<img class="assign assignselected" alt:"Assign Image" />');
if (element.assigned == true) {
assignimage = ('<img class="assigned assignselected" alt:"Assign Image" />');
}
var td = $("<td>" + assignimage + "</td>");
tr.append(td);
assignimage = ('<img class="no-testresults editselected" alt:"Update Test Results" />');
var td = $("<td>" + assignimage + "</td>");
tr.append(td);
});
},
error: function (err) {
alert("Ajax failed:");
console.log(err);
}
});
Question
How do I remove this grey border? Any help would be appreciated.

Answer 1

Change your table CSS to:
table {
border:0;
}

Answer 2

add border 0 on table
table {
border-collapse:collapse;
border:0;
}

Answer 3

Could be background colour coming through?
td {
background-color: #fff;
padding: 0;
}
img {
margin: 0;
display: block;
}

Answer 4

Try using exact specificity for that vs just targeting the table, so try this:
table thead > tr > th { border: none; }

Answer 5

I had the same issue and finally figured it out. The combination of an img Tag and the background property causes this issue. Either use the img tag with src= or use another tag.
Answer found here: css "background-image" shows unwanted border, img "src" does not