最近在仿写12306火车票查询页面。将12306网站的样式取了下来，其静态页面显示正常，但是通过ajax调用后台数据，再通过append回显却出现了表格挤压的情况。

1、正常显示页面如下：

html代码：

2、通过ajax向后台发起请求，并通过append回显结果，却出现了表格被收缩的情况。如下图：

js代码如下：

function trainQuery(type){

//查询火车余票信息

var tckTyp = type;

var qryDate = $("#train_start_date").val();

var fromStn = $("#fromStationText").val();

var toStn = $("#toStationText").val();

var requestParams = "?qryDte=" + qryDate + "&fromStn=" + fromStn + "&toStn=" + toStn + "&tckTyp=" + tckTyp;

var paraObj = { apiId: 102, interfaceId: 3, requestParams: requestParams};

$.ajax({

url : "${skx}/practicalTool",

type : "get",

dataType : "json",

data : paraObj,

success : function(json) {

if(json.resultcode == "200"){

var data = json.data;

var fromStan = "";

$("#_query_table_datas").css({"display" : "block"});

$("#_query_table_datas").html("");

$.each(data, function(i, trainData){

fromStan = trainData.fromStan;

var trainContent = "

\n\n";

trainContent += "

\n\n";

trainContent += "

\n" + trainData.sw_Num + "\n\n";

trainContent += "

\n" + trainData.td_num + "\n\n";

trainContent += "

\n" + trainData.yd_num + "\n\n";

trainContent += "

\n" + trainData.ed_num + "\n\n";

trainContent += "

\n" + trainData.gr_num + "\n\n";

trainContent += "

\n" + trainData.rw_num + "\n\n";

trainContent += "

\n" + trainData.yw_num + "\n\n";

trainContent += "

\n" + trainData.rz_num + "\n\n";

trainContent += "

\n" + trainData.yz_num + "\n\n";

trainContent += "

\n" + trainData.wz_num + "\n\n";

trainContent += "

\n" + trainData.qt_num + "\n\n";

trainContent += "

\n\n";

trainContent += "

\n";

$("#_query_table_datas").append($(trainContent));

});

alert("fromStan:" + fromStan);

$(".errMsg").html("");

}

else{

$("#_query_table_datas").css({"display" : "none"});

$(".errMsg").html(json.reason);

}

},

error : function(){

$("#_query_table_datas").css({"display" : "none"});

$(".errMsg").html("火车票查询异常!");

}

});

return;

}

尝试了很多办法都不奏效，无奈之下只好到贵论坛寻求帮助，还请各位大神不吝赐教！