jquery - 使用 ajax 查询时 html 数据表和标题未对齐

Question

在我的 Flask 应用程序中，我已经从使用 Flask 构建的日志表切换到重新加载页面时使用 ajax 调用。

ajax 工作正常，但由于某些原因，标题和数据未对齐并且具有不同的字体(如下所示)

在 flask 中构建的 html 是这样构建的:

def htmlbuild(data):
    html="<table><th>Time</th><th>Username</th><th>Action</th>"
    for line in data:
        html+= "<tr><td>%s</td><td>%s</td><td>%s</td></tr>" % (line[1], line[2], line[3])
    html+="</table>"
    return html

在 JavaScript/JQuery 中，表格就是这样构建的。

(function ajaxLogCalls(){    $.ajax({ url: "{{ url_for('.ajaxLogGrab') }}", dataType: 'json',
    success: function(data, textStatus, xhr){
        $("#logtable").empty();
        $("#logtable").append("<table><th>Time</th><th>Username</th><th>Action</th>");
        $(data.logs).each(function(i, el) {
            var listem = el.datestamp + "</td><td>" + el.username + "</td><td>" + el.action;
            $("#logtable").append("<tr><td>" + listem + "</td></tr>");
        });
        $("#logtable").append("</table>");
    }
    });
    setTimeout(ajaxLogCalls, 2000)
    })();

在功能上，它们基本相同。

我不得不为表格创建一个新的 div，但我看不到任何会反对它的 css。另外，由于我是按 ID 定位的，所以我尝试使用 form 和 ul 而不是 div 并得到了相同的结果。

适用于表格的 CSS 是:

th {
background-color: #006099;
color: white;
 }
tr:nth-child(even) {background-color: #f2f2f2}
th, td {
border-bottom: 1px solid #ddd;
padding: 5px;
text-align: left;
}
table {
width: 100%;
}

有趣的是，当我尝试将某些东西应用于新的 div 以更改字体大小时，它更改了数据而不是标题。正如我所说，这似乎只发生在由 ajax 构建的数据上。

 #logtable {
font: 70px Georgia, sans-serif;
}

谁能指出我可能发生的事情的正确方向？

Answer 1

发现了差异，但仍不确定原因。 flask 输出没有回车，但 javascript append 有，所以我把它全部变成一个长字符串，现在它可以正确呈现。

(function ajaxLogCalls(){    $.ajax({ url: "{{ url_for('.ajaxLogGrab') }}", dataType: 'json',
    success: function(data, textStatus, xhr){
        $("#logtable").empty();
        var output1 = "<table><tr><th>Time</th><th>Username</th><th>Action</th></tr>"
        $(data.logs).each(function(i, el) {

            var output2 = "<tr><td>" + el.datestamp + "</td><td>" + el.username + "</td><td>" + el.action + "</td></tr>";

            output1 += output2;
        });
        $("#logtable").append(output1 + "</table>");
    }
    });
    setTimeout(ajaxLogCalls, 2000)
    })();

不过还是很奇怪。