HTML の append によって追加されたテーブル要素は、静的に表示される elements_html/css_WEB-ITnose とは異なるスタイルを持ちます。

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

1、正常显示页面如下：



html代码：
de38e5e7c7a8edd883f5a8bc8cb5021f
f5d188ed2c074f8b944552db028f98a1
ae20bdd317918ca68efdc799512a9b39
87a80c494ee95ec57f108b1e73d1fb59
1ce4add72258d4fb64c3e35b08bbc59e车次01c3ce868d2b3d9bce8da5c1b7e41e5b
4753585e23b96cef7af1b38b3a8f9522f1028a703a7cc0b9b0b6ebc8a98bd6fd
45a2772a6b6107b401db3c9b82c049c2出发站54bdf357c58b8a65c66d7c19c8e4d114 d702e365f168b87bc4076910df46b0f1 45a2772a6b6107b401db3c9b82c049c2到达站54bdf357c58b8a65c66d7c19c8e4d114
16b28748ea4df4d9c2150843fecfba6801c3ce868d2b3d9bce8da5c1b7e41e5b
7bb4411422f6faa95a3031e4573d8bfc472ebbba06f870a3bcbd1759a79e2c64
54a76b0e48e2b0f19612b7fe1698a4f7出发时间54bdf357c58b8a65c66d7c19c8e4d1140c6dc11e160d3b678d68754cc175188a
fbfbb1224744e14e64f4ded9d5a07e3d到达时间54bdf357c58b8a65c66d7c19c8e4d114
16b28748ea4df4d9c2150843fecfba6801c3ce868d2b3d9bce8da5c1b7e41e5b
7bb4411422f6faa95a3031e4573d8bfc6ff8ca8a76313af7169bab8b1a04e654历时54bdf357c58b8a65c66d7c19c8e4d11401c3ce868d2b3d9bce8da5c1b7e41e5b
a29aafa542619bd7411fb121e2fb127f商务座01c3ce868d2b3d9bce8da5c1b7e41e5b
a29aafa542619bd7411fb121e2fb127f特等座01c3ce868d2b3d9bce8da5c1b7e41e5b
a29aafa542619bd7411fb121e2fb127f一等座01c3ce868d2b3d9bce8da5c1b7e41e5b
a29aafa542619bd7411fb121e2fb127f二等座01c3ce868d2b3d9bce8da5c1b7e41e5b
a29aafa542619bd7411fb121e2fb127f高级d702e365f168b87bc4076910df46b0f1
软卧
01c3ce868d2b3d9bce8da5c1b7e41e5b
a29aafa542619bd7411fb121e2fb127f软卧01c3ce868d2b3d9bce8da5c1b7e41e5b
a29aafa542619bd7411fb121e2fb127f硬卧01c3ce868d2b3d9bce8da5c1b7e41e5b
a29aafa542619bd7411fb121e2fb127f软座01c3ce868d2b3d9bce8da5c1b7e41e5b
a29aafa542619bd7411fb121e2fb127f硬座01c3ce868d2b3d9bce8da5c1b7e41e5b
a29aafa542619bd7411fb121e2fb127f无座01c3ce868d2b3d9bce8da5c1b7e41e5b
a29aafa542619bd7411fb121e2fb127f其它01c3ce868d2b3d9bce8da5c1b7e41e5b
01a4e613d9290055e2ceaa499c485592备注01c3ce868d2b3d9bce8da5c1b7e41e5b
fd273fcf5bcad3dfdad3c41bd81ad3e5
7943277d65306330563feb42dc8c705a
735ce4d4212ab2024d9c79036d128449
4ad3a1f68032a54387eac25374065d81
8dc93f4d0047aab31d29f4e1b47abc32
dddb29d838558fc85aa1f0024f72bcc9
d9bc97cc8c21e39bf2f11c25ce24f39c
dc6dce4a544fdca2df29d5ac0ea9906b
2499a8e451bc1239e4689c36707f64bfC70405db79b134e9f6b82c0b36e0489ee08ed

16b28748ea4df4d9c2150843fecfba68
1689502942edbdcbb7f0c16b1ea01db93aa40425e99317d8ffeb1a2c52fc1e170d36329ec37a2cc24d42c7229b69747a54bdf357c58b8a65c66d7c19c8e4d114
16b28748ea4df4d9c2150843fecfba68
99d40ac86af00c09567cfa00ab0380b6

a791f43a70be8f68eef6a3880ca55d31深圳128dba7a3a77be0113eb0bea6ea0a5d0 39e436dbfaa901d28b2e693291849362广州东128dba7a3a77be0113eb0bea6ea0a5d0

16b28748ea4df4d9c2150843fecfba68
1b5b02353ac388e68314affe40c69906
9cc5ecf7eb9c4c78b3558f70fd4bca3d12:48128dba7a3a77be0113eb0bea6ea0a5d0 d33cbe73c992d698acbfb4c48ba51f5f14:00128dba7a3a77be0113eb0bea6ea0a5d0
16b28748ea4df4d9c2150843fecfba68
dc02657f84a6292fe2e6f52844ff93ef
8e99a69fbe029cd4e2b854e244eab1431小时12分128dba7a3a77be0113eb0bea6ea0a5d0 8c147d5f6c1bbf633e3fef5f3d78efab当日到达54bdf357c58b8a65c66d7c19c8e4d114
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
b90dd5946f0946207856a8a37f441edf

311cd5952f67b7bc5162c583bcabbf40
8c147d5f6c1bbf633e3fef5f3d78efab--54bdf357c58b8a65c66d7c19c8e4d114
b90dd5946f0946207856a8a37f441edf
311cd5952f67b7bc5162c583bcabbf40
8c147d5f6c1bbf633e3fef5f3d78efab--54bdf357c58b8a65c66d7c19c8e4d114
b90dd5946f0946207856a8a37f441edf
311cd5952f67b7bc5162c583bcabbf40
19850076987f85f87102c684d8ebbaa49054bdf357c58b8a65c66d7c19c8e4d114
b90dd5946f0946207856a8a37f441edf
311cd5952f67b7bc5162c583bcabbf40
19850076987f85f87102c684d8ebbaa428254bdf357c58b8a65c66d7c19c8e4d114
b90dd5946f0946207856a8a37f441edf
311cd5952f67b7bc5162c583bcabbf40
8c147d5f6c1bbf633e3fef5f3d78efab--54bdf357c58b8a65c66d7c19c8e4d114
b90dd5946f0946207856a8a37f441edf
311cd5952f67b7bc5162c583bcabbf40
8c147d5f6c1bbf633e3fef5f3d78efab--54bdf357c58b8a65c66d7c19c8e4d114
b90dd5946f0946207856a8a37f441edf
311cd5952f67b7bc5162c583bcabbf40
8c147d5f6c1bbf633e3fef5f3d78efab--54bdf357c58b8a65c66d7c19c8e4d114
b90dd5946f0946207856a8a37f441edf
311cd5952f67b7bc5162c583bcabbf40
8c147d5f6c1bbf633e3fef5f3d78efab--54bdf357c58b8a65c66d7c19c8e4d114
b90dd5946f0946207856a8a37f441edf
311cd5952f67b7bc5162c583bcabbf40
8c147d5f6c1bbf633e3fef5f3d78efab--54bdf357c58b8a65c66d7c19c8e4d114
b90dd5946f0946207856a8a37f441edf
311cd5952f67b7bc5162c583bcabbf40
8c147d5f6c1bbf633e3fef5f3d78efab无54bdf357c58b8a65c66d7c19c8e4d114
b90dd5946f0946207856a8a37f441edf
311cd5952f67b7bc5162c583bcabbf40
8c147d5f6c1bbf633e3fef5f3d78efab--54bdf357c58b8a65c66d7c19c8e4d114
b90dd5946f0946207856a8a37f441edf
6ed408c9469cabf42d8ef8f4dde3ed9f8c147d5f6c1bbf633e3fef5f3d78efab54bdf357c58b8a65c66d7c19c8e4d114b90dd5946f0946207856a8a37f441edf

fd273fcf5bcad3dfdad3c41bd81ad3e5
8a3e3943b4d41cc88745d8c0a51945bc
fd273fcf5bcad3dfdad3c41bd81ad3e5
ca745a59da05f784b8811374296574e1
f16b1740fad44fb09bfe928bcc527e08
16b28748ea4df4d9c2150843fecfba68

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 = "7cd0ac6270b17ee30c4f6128632e25b3\n69d2c39a6620ef37b6b0a065e397c3f2\n";

trainContent += "ae2a605e858f73f221a61754b5fcf401\ne9499c2580bee029825554eefad1e329\n";
trainContent += "dc6dce4a544fdca2df29d5ac0ea9906b\n30b003fd4bd8ec17905fdcae403336e5" + trainData.stanTrainCde + "5db79b134e9f6b82c0b36e0489ee08ed\n";
trainContent += "16b28748ea4df4d9c2150843fecfba68\nbbcdb651983da1aaab5df7c496d8044e6240b8e6ae9568044b5e35e46b55af0e0d36329ec37a2cc24d42c7229b69747a54bdf357c58b8a65c66d7c19c8e4d114\n";
trainContent += "16b28748ea4df4d9c2150843fecfba68\n6d18be8b3448d03abe445136dc6fd902\n d874c8efccf1c444c2eea04e6ab4ee15" + trainData.fromStan +  "128dba7a3a77be0113eb0bea6ea0a5d0 13d773d9500797ff379fe92012e87c2a" + trainData.toStan + "128dba7a3a77be0113eb0bea6ea0a5d0\n";
trainContent += "16b28748ea4df4d9c2150843fecfba68\nfae44fa6d5cb6bba12d44720d243418b\n2ec1a6871723a803b00499cd859095ca" + trainData.startTme + "128dba7a3a77be0113eb0bea6ea0a5d0 f010e9873637227a81555358c5bbaa17" + trainData.arvTme + "128dba7a3a77be0113eb0bea6ea0a5d0\n16b28748ea4df4d9c2150843fecfba68\n";
trainContent += "7b776bcfff91829e04974b9ae1d07034\n8e99a69fbe029cd4e2b854e244eab143" + trainData.sptTme + "128dba7a3a77be0113eb0bea6ea0a5d0 a4e520fb906a5d306fae79fecf4008e5" + trainData.dayDif + "54bdf357c58b8a65c66d7c19c8e4d114\n16b28748ea4df4d9c2150843fecfba68\n16b28748ea4df4d9c2150843fecfba68nb90dd5946f0946207856a8a37f441edfn";
trainContent += "6dd71cae44475b18de83f5af1b571deen7c6fc8556067b027851a31acbcb1baf2" + trainData.sw_Num + "54bdf357c58b8a65c66d7c19c8e4d114 nb90dd5946f0946207856a8a37f441edfn";
trainContent += "6dd71cae44475b18de83f5af1b571deen7c6fc8556067b027851a31acbcb1baf2" + trainData.td_num + "54bdf357c58b8a65c66d7c19c8e4d114 nb90dd5946f0946207856a8a37f441edfn";
trainContent += "6dd71cae44475b18de83f5af1b571deen7c6fc8556067b027851a31acbcb1baf2" + trainData.yd_num + "54bdf357c58b8a65c66d7c19c8e4d114 nb90dd5946f0946207856a8a37f441edfn";
trainContent += "6dd71cae44475b18de83f5af1b571deen7c6fc8556067b027851a31acbcb1baf2" + trainData.ed_num + "54bdf357c58b8a65c66d7c19c8e4d114 nb90dd5946f0946207856a8a37f441edfn";
trainContent += "6dd71cae44475b18de83f5af1b571deen7c6fc8556067b027851a31acbcb1baf2" + trainData.gr_num + "54bdf357c58b8a65c66d7c19c8e4d114 nb90dd5946f0946207856a8a37f441edfn";
trainContent += "6dd71cae44475b18de83f5af1b571deen7c6fc8556067b027851a31acbcb1baf2" + trainData.rw_num + "54bdf357c58b8a65c66d7c19c8e4d114 nb90dd5946f0946207856a8a37f441edfn";
trainContent += "6dd71cae44475b18de83f5af1b571deen7c6fc8556067b027851a31acbcb1baf2" + trainData.yw_num + "54bdf357c58b8a65c66d7c19c8e4d114 nb90dd5946f0946207856a8a37f441edfn";
trainContent += "6dd71cae44475b18de83f5af1b571deen7c6fc8556067b027851a31acbcb1baf2" + trainData.rz_num + "54bdf357c58b8a65c66d7c19c8e4d114 nb90dd5946f0946207856a8a37f441edfn";
trainContent += "6dd71cae44475b18de83f5af1b571deen7c6fc8556067b027851a31acbcb1baf2" + trainData.yz_num + "54bdf357c58b8a65c66d7c19c8e4d114 nb90dd5946f0946207856a8a37f441edfn";
trainContent += "6dd71cae44475b18de83f5af1b571deen7c6fc8556067b027851a31acbcb1baf2" + trainData.wz_num + "54bdf357c58b8a65c66d7c19c8e4d114 nb90dd5946f0946207856a8a37f441edfn";
trainContent += "6dd71cae44475b18de83f5af1b571deen7c6fc8556067b027851a31acbcb1baf2" + trainData.qt_num + "54bdf357c58b8a65c66d7c19c8e4d114 nb90dd5946f0946207856a8a37f441edfn";
trainContent += "74ab0d6731ebaeae90166f741fb8e2697c6fc8556067b027851a31acbcb1baf254bdf357c58b8a65c66d7c19c8e4d114b90dd5946f0946207856a8a37f441edfnfd273fcf5bcad3dfdad3c41bd81ad3e5n";
trainContent += "3fda0e5b1f0c6916df2efb53d8a1b94ffd273fcf5bcad3dfdad3c41bd81ad3e5n";
$("#_query_table_datas").append($(trainContent))
}) ;

alert("fromStan:" + fromStan);

$(".errMsg").html("");
else{
$("#_query_table_datas").css({"display" : "なし"});
$(".errMsg").html(json.reason)
}
},
エラー : function(){
$("#_query_table_datas").css({"display" : "none"});
$(".errMsg").html("電車のチケットのクエリ例外!")

return;

多くの方法を試しましたが、うまくいきませんでした。フォーラムに行って助けを求めるしかありません。

ディスカッションへの返信 (解決策) 要素を検査し、構造とスタイルを確認してください

幅は制限されていますか? スタイルを確認してください? ?

要素をレビューしたときに表示されるhtmlは次のとおりです:

<tbody id="_query_table_datas" style="display: block;"><tr class="bgc" id="ticket_G6260"><td colspan="4" width="370"><div class="ticket-info clearfix" id="train_num_1"><div class="train"><div><a title="点击查看停靠站信息" onclick="myStopStation.open('1','65000C704001','SZQ','GGQ','20151023','3')" href="javascript:" class="number">G6260</a></div><span onclick="$.showTicketPrice('65000C704001','无')" class="lookup" id="65000C704001_01_05_OMO" title="查看票价" style="cursor: pointer;"><b style="cursor: pointer;"></b></span></div><div class="cdz"> <strong class="start-s">深圳北</strong> <strong class="end-s">广州南</strong></div><div class="cds"><strong class="start-t">22:26</strong> <strong class="color999">23:02</strong></div><div class="ls"><strong>00:36</strong> <span class="color999">当日到达</span></div></div></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">9</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">无</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">6</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">6</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">--</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">--</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">--</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">--</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">--</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">75</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">--</span></td><td class="no-br"><span class="color999"></span></td></tr><tr style="display: none;" id="price_65000C712401"></tr><tr class="bgc" id="ticket_C7124"><td colspan="4" width="370"><div class="ticket-info clearfix" id="train_num_2"><div class="train"><div><a title="点击查看停靠站信息" onclick="myStopStation.open('1','65000C704001','SZQ','GGQ','20151023','3')" href="javascript:" class="number">C7124</a></div><span onclick="$.showTicketPrice('65000C704001','无')" class="lookup" id="65000C704001_01_05_OMO" title="查看票价" style="cursor: pointer;"><b style="cursor: pointer;"></b></span></div><div class="cdz"> <strong class="start-s">深圳</strong> <strong class="end-s">广州东</strong></div><div class="cds"><strong class="start-t">22:38</strong> <strong class="color999">23:50</strong></div><div class="ls"><strong>1小时12分</strong> <span class="color999">当日到达</span></div></div></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">--</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">--</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">107</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">107</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">--</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">--</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">--</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">--</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">--</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">无</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">--</span></td><td style="white-space: nowrap;width=49px;" class="no-br" width="49"><span class="color999"></span></td></tr><tr id="price_65000C712401" style="display: none;"></tr><tr class="bgc" id="ticket_G6330"><td colspan="4" width="370"><div class="ticket-info clearfix" id="train_num_3"><div class="train"><div><a title="点击查看停靠站信息" onclick="myStopStation.open('1','65000C704001','SZQ','GGQ','20151023','3')" href="javascript:" class="number">G6330</a></div><span onclick="$.showTicketPrice('65000C704001','无')" class="lookup" id="65000C704001_01_05_OMO" title="查看票价" style="cursor: pointer;"><b style="cursor: pointer;"></b></span></div><div class="cdz"> <strong class="start-s">深圳北</strong> <strong class="end-s">广州南</strong></div><div class="cds"><strong class="start-t">23:03</strong> <strong class="color999">23:32</strong></div><div class="ls"><strong>00:29</strong> <span class="color999">当日到达</span></div></div></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">无</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">无</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">无</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">无</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">--</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">--</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">--</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">--</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">--</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">57</span></td><td style="white-space: nowrap;width=49px;" class="cursor" onclick="$.showTicketPrice('65000C704001','无')" width="49"><span class="color999">--</span></td><td style="white-space: nowrap;width=49px;" class="no-br" width="49"><span class="color999"></span></td></tr><tr id="price_65000C712401" style="display: none;"></tr></tbody>

tdのスタイルはwidthが反映されないため、この方法で改善しようとしましたが、結果は無効でした。

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

レビューの結果、最初のセルの幅は 49 ではなく 13 であり、テキストが折り返されないように設定されていることがわかります。





良いニュースです。あなたの質問に対する答えが見つかりました。問題は、tbody の display:block 属性の設定にあり、テーブルが元の幅に適応しなくなります。次のコードをコメントアウトするだけです。

リーリー