标签面板表格标题未正确显示

时间：2019-06-17 09:15:37

标签： jquery css

我正在处理一个脚本，该脚本包含两个选项卡面板，两个选项卡面板均显示一个表头。 使用Ajax调用填充该表，并格式化响应并显示数据。 当我运行代码时，第一个选项卡面板显示的表格标题显示完美，所有表格列均以百分比隔开。

当我单击第二个选项卡面板标题表标题时，所有标题都聚集在左侧。但是，如果我手动调整浏览器窗口的大小，则第二个选项卡面板的标题会自动调整为正确的布局，并且第一个选项卡面板的标题会聚在左侧。我可以在检查控制台中看到标题宽度突然出现。

我认为可能是样式问题，这就是为什么我标记的是CSS，但我可能是错的。

选项卡面板： 第一个标签面板

<div class="TabbedPanelsContentGroup">
  <div class="TabbedPanelsContent">
    <table name="timeline" border="0" cellpadding="0" cellspacing="0"  id="userTableInbound" style="width:100%" class="display">
    <thead>
    <tr>
      <th width="12%"><div class="TableHeaderText">Flight No</div></th>
      <th width="12%"><div class="TableHeaderText">Schedule Time</div></th>
      <th width="12%"><div class="TableHeaderText">Airline Code</div></th>
      <th width="12%"><div class="TableHeaderText">Airline Name</div></th>
      <th width="12%"><div class="TableHeaderText">IO</div></th>
      <th width="6%"><div class="LogoSize"></div></th>
      <th width="32%"><div class="TableHeaderText"></div></th>
      <th width="2%"><div class="TableHeaderTextNormal">Action</div></th>
    </tr>
    </thead>
    <tbody>
    </tbody>
    </table>
  </div>

第二个标签面板

  <div class="TabbedPanelsContent">
    <table name="timeline" border="0" cellpadding="0" cellspacing="0"  id="userTableOutbound" style="width:100%" class="display">
    <thead>
    <tr>
      <th width="12%"><div class="TableHeaderText">Flight No</div></th>
      <th width="12%"><div class="TableHeaderText">Schedule Time</div></th>
      <th width="12%"><div class="TableHeaderText">Airline Code</div></th>
      <th width="12%"><div class="TableHeaderText">Airline Name</div></th>
      <th width="12%"><div class="TableHeaderText">IO</div></th>
      <th width="6%"><div class="LogoSize"></div></th>
      <th width="32%"><div class="TableHeaderText"></div></th>
      <th width="2%"><div class="TableHeaderTextNormal">Action</div></th>
    </tr>
    </thead>
    <tbody>
    </tbody>
    </table>
  </div>
    </div>
  </div>

进行Ajax调用并格式化响应的代码：

var depart;
var airlinelogopath = "<?php echo $AirlineImagePath;?>";
$(document).ready(function(){
  $('#userTableOutbound').DataTable( {
    ordering: false,
    paging: false,
    searching: false,
    bInfo : false,
    scrollCollapse: true,
    scrollY: "400px",
    responsive: true,
    language: {
      emptyTable: "Please wait .. biulding timeline",
      loadingRecords: "No data available in table ",
      zeroRecords: "No matching records found"
    },
    "stripeClasses": [ 'odd-row', 'even-row' ]
  });
  $.ajax({
    url: 'flight-outbound.php',
    type: 'get',
    dataType: 'JSON',
    success: function(response){
      var len = response.length;
      $("#userTableOutbound tbody").html("");
      for(var i=0; i<len; i++){
        var recordid = response[i].RecordID;
        var flightno = response[i].FlightNo;
        var airlinecode = response[i].AirlineCode;
        var airlinename = response[i].AirlineName;
        var airlinelogo = response[i].AirlineLogo;
        var schedtime = response[i].ScheduleTime;
        var io = response[i].IO;
        if( io == "I") {
          depart = "In bound";
        } else {
          depart = "Out bound";
        }
        var d = new Date();
    var tr_str = "<tr class='TableText'>" +
        "<td style='color:#333;font-size:0.7em;width:12%;'>" + flightno + " </td>" +
        "<td style='color:#333;font-size:0.7em;width:12%;'>" + schedtime + "</td>" +
        "<td style='color:#333;font-size:0.7em;width:12%;'>" + airlinecode + " </td>" +
        "<td style='color:#333;font-size:0.7em;width:12%;'>" + airlinename + "</td>" +
        "<td style='color:#333;font-size:0.7em;width:12%;'>" + depart + "</td>" +
        "<td style='color:#333;width:9px;height:9px;width:6%;'><input name='view' type='image' src='" + airlinelogopath + ""  + airlinelogo + "' id=" + recordid + " class='btn  btn-xs btn-block single-preview'></td>" +
        "<td style='color:#333;font-size:0.7em;width:32%;'></td>" +
        "<td align='center'  style='color:#333;font-size:0.7em;width:2%;'><input type='button' name='edit' value='View' id=" + recordid + " class='btn btn-info btn-xs btn-block view_data_carousel'></td>" +
        "</tr>";
        $("#userTableOutbound tbody").append(tr_str);
      }
     }
  });
});

当我在控制台中检查代码时，我看到以下内容，即使设置了th的宽度，它们也将样式宽度显示为0px。 如果删除th宽度，则仍然相同，将样式宽度显示为0px。

<th width="12%" class="sorting_disabled" rowspan="1" colspan="1" style="width: 0px;"><div class="TableHeaderText">Flight No</div></th>
<th width="12%" class="sorting_disabled" rowspan="1" colspan="1" style="width: 0px;"><div class="TableHeaderText">Schedule Time</div></th>
<th width="12%" class="sorting_disabled" rowspan="1" colspan="1" style="width: 0px;"><div class="TableHeaderText">Airline Code</div></th>
<th width="12%" class="sorting_disabled" rowspan="1" colspan="1" style="width: 0px;"><div class="TableHeaderText">Airline Name</div></th>
<th width="12%" class="sorting_disabled" rowspan="1" colspan="1" style="width: 0px;"><div class="TableHeaderText">IO</div></th>
<th width="6%" class="sorting_disabled" rowspan="1" colspan="1" style="width: 0px;"><div class="LogoSize"></div></th>
<th width="32%" class="sorting_disabled" rowspan="1" colspan="1" style="width: 0px;"><div class="TableHeaderText"></div></th>
<th width="2%" class="sorting_disabled" rowspan="1" colspan="1" style="width: 0px;"><div class="TableHeaderTextNormal">Action</div></th>

调整浏览器窗口大小后：

<th width="12%" class="sorting_disabled" rowspan="1" colspan="1" style="width: 204px;"><div class="TableHeaderText">Flight No</div></th>
<th width="12%" class="sorting_disabled" rowspan="1" colspan="1" style="width: 206px;"><div class="TableHeaderText">Schedule Time</div></th>
<th width="12%" class="sorting_disabled" rowspan="1" colspan="1" style="width: 206px;"><div class="TableHeaderText">Airline Code</div></th>
<th width="12%" class="sorting_disabled" rowspan="1" colspan="1" style="width: 207px;"><div class="TableHeaderText">Airline Name</div></th>
<th width="12%" class="sorting_disabled" rowspan="1" colspan="1" style="width: 206px;"><div class="TableHeaderText">IO</div></th>
<th width="6%" class="sorting_disabled" rowspan="1" colspan="1" style="width: 102px;"><div class="LogoSize"></div></th>
<th width="32%" class="sorting_disabled" rowspan="1" colspan="1" style="width: 552px;"><div class="TableHeaderText"></div></th>
<th width="2%" class="sorting_disabled" rowspan="1" colspan="1" style="width: 46px;"><div class="TableHeaderTextNormal">Action</div></th>

第二个选项卡面板的数据正确显示。 谁能看到我要去哪里错了。

在此先感谢您的帮助和时间。

0 个答案:

没有答案
相关问题
最新问题