灰色边框周围图像答案

【问题标题】：grey border surrounding image灰色边框周围图像
【发布时间】：2023-03-07 03:21:01
【问题描述】：

我在视图上有一个引导表，最后两列是图像。一旦 Ajax 调用成功，我就会加载表。

问题

当表格 id 填充数据时，我看到灰色边框，没有任何意义。我没有任何指定边框的代码。下面是我的 CSS 代码

img {
    border:none;
}

table {
    border-collapse:collapse;
}

.assign {
    background: url(Images/user_not_assigned.png) no-repeat;
    width:100%;
    height:40px;
}

我为图像添加了蓝色虚线边框以确保它被覆盖。我看到蓝色虚线边框和灰色边框

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 视图：

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

$.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);
    }
});

问题

如何去除这个灰色边框？任何帮助，将不胜感激。

【问题讨论】：

嘿把 HTML 代码也放或者创建 jsfiddle
@priya_singh 添加了html代码和JS代码
看@user6747972 的解决方案？

标签： html css

【解决方案1】：

将表格 CSS 更改为：

table {
    border:0;
}

【讨论】：

我试过了，但还是有灰色边框。灰色边框来自 JQuery 或 Bootstrap css，因为我没有写任何东西来包含灰色边框

【解决方案2】：

在桌子上添加border0

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

【讨论】：

【解决方案3】：

可能是背景颜色通过？

td {
    background-color: #fff;
    padding: 0;
}

img {
    margin: 0;
    display: block;
}

【讨论】：

【解决方案4】：

尝试使用精确的特异性而不是仅仅针对表格，所以试试这个：

table thead > tr > th { border: none; }

【讨论】：

谢谢@kawnah 问题没有得到解决。我将删除图像，然后看看是否可以添加另一个图像。
帮我一个忙，再尝试一件事......在你的 HTML 第 2 行去掉 table-striped 类，所以它只是 <table id="editorder" class="table table-hover">

【解决方案5】：

我遇到了同样的问题，终于解决了。 img 标记和background 属性的组合会导致此问题。将img 标记与src= 一起使用，或者使用另一个标记。

在这里找到答案：css "background-image" shows unwanted border, img "src" does not

【讨论】：