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

Question

在我的烧瓶应用程序中，我已经从烧瓶构建的logtable切换到重新加载到ajax调用的页面。

ajax工作正常，但由于某种原因，标题和数据未对齐且字体不同（如下所示）

以烧瓶方式构建的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进行定位，我尝试将其作为一个表单而不是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

找出差异，但仍不确定原因。烧瓶输出没有回车，但是javascript追加了，所以我将它全部改成了一个长字符串，现在它正确呈现。

(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)
    })();

虽然仍然很奇怪。