Question

我在视图上有一个Bootstrap表，最后两列是图像。一旦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);
    }
});

问题

如何删除此灰色边框？任何帮助，将不胜感激。

Answer 1

将您的表格CSS更改为：

[++]

Answer 2

在表

上添加border 0

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

Answer 3

可能会出现背景颜色吗？

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

img {
    margin: 0;
    display: block;
}

Answer 4

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

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

Answer 5

我遇到了同样的问题，并最终解决了。 img标签和background属性的组合会导致此问题。将img标签与src=一起使用，或使用其他标签。

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

灰色边框周围的图像

5 个答案: