html中append追加的表格元素和静态显示的元素样式不同_html/css_WEB-ITnose

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

1、正常显示页面如下：



html代码：

车次	出发站 到达站	id="startendtime"> 出发时间 到达时间	id="_span_lishi" style="cursor: pointer;">历时	商务座	特等座	一等座	二等座	高级 软卧	软卧	硬卧	软座	硬座	无座	其它	备注
onclick="myStopStation.open('1','65000C704001','SZQ','GGQ','20151023','3')" href="javascript:" class="number">C7040 class="lookup" id="65000C704001_01_05_OMO" title="查看票价" style="cursor: pointer;"> 深圳 广州东 12:48 14:00 1小时12分 当日到达				--	--	90	282	--	--	--	--	--	无	--

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.stanTrainCde + "\n";
trainContent += "

\n\n";
trainContent += "

\n

\n " + trainData.fromStan + " " + trainData.toStan + "\n";
trainContent += "

\n

\n" + trainData.startTme + " " + trainData.arvTme + "\n

\n";
trainContent += "

\n" + trainData.sptTme + " " + trainData.dayDif + "\n

\n

\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;
}

尝试了很多办法都不奏效，无奈之下只好到贵论坛寻求帮助！

回复讨论(解决方案)

审查元素检查下结构和样式

宽度是不是被限制了，查看查看样式？？

审查元素看到的html如下：

G6260


 深圳北 广州南


22:26 23:02


00:36 当日到达


9
无
6
6
--
--
--
--
--
75
--






C7124


 深圳 广州东


22:38 23:50


1小时12分 当日到达


--
--
107
107
--
--
--
--
--
无
--






G6330


 深圳北 广州南


23:03 23:32


00:29 当日到达


无
无
无
无
--
--
--
--
--
57
--

td里面的style是因为宽度不生效试图通过这种方式改善，结果无效。

style="white-space: nowrap;width=49px;"

审查结果显示第一个单元格宽度是13，不是49，也设置了不让文字换行。

好消息，已经找到问题答案了。问题出在对tbody设置了display:block属性，让表格不再适应原有宽度。注释掉如下代码就可以了。

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