我正在从 jquery 分配表数据，但我的表中有响应问题

【问题标题】：I am assigning table data from jquery and I have responsive problem in my table我正在从 jquery 分配表数据，但我的表中有响应问题
【发布时间】：2019-12-01 02:06:35
【问题描述】：

在上图中，数据显示在表外。

代码：

 <?php include 'header.php';?>
  <style type="text/css" media="screen">
  td{
    padding: 0;
  }  
  .ol-container {
    line-height: 0.7;
  }
  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
  }
  .container {
      text-transform: uppercase;
    }
  </style>

  <script src="/assets/js/plugins/jquery.min.js"></script>
  <script src="/assets/js/jquery.validate.min.js"></script>
  <script>
   var jq = $.noConflict();
  </script>
  <div class="content-area">
    <div class="bg-white">
      <table id="enquiry_table" class="table table-bordered table-striped table-sm" style="text-align:center;">
                   <thead>
                       <tr>
                          <th>From</th>
                          <th>TO</th>
                          <th>Date</th>
                          <th>Status</th>
                       </tr>
                  </thead>
                 </table>
         </div>
         </div>
  <script type="text/javascript">
   jq("#get").click(function(){
               status_form();
               return false;
            });
  </script>

  <script type="text/javascript">
       function status_form()
         {    
              var lr_no = jq('#lr_no').val();
                        jq.ajax({
                            url :"https://url/sitecontroller/StatusController/fetchStatus",
                            type:"POST",
                            dataType: "json",
                            data:{
                              lr_no:lr_no,
                           },
                            success: function(data)
                            {
                              jq("#get").hide();    
                              console.log(data);
                              //alert(data.bilty);
                              if(data.bilty!='' && data.records!='' )
                              {
                           jq('#enquiry_table').append(
                           jq('<tr>')
                              .append(jq('<td>').append(data.bilty[0].from))
                              .append(jq('<td>').append(data.bilty[0].to))
                              .append(jq('<td>').append(data.bilty[0].lr_date))
                              .append(jq('<td>').append("Booking"))
                                );
                    jQuery.each(data.records, function(index, item) {
                    jq('#enquiry_table').append(
                            jq('<tr>')
                              .append(jq('<td>').append(data.bilty[0].from))
                              .append(jq('<td>').append(data.bilty[0].to))
                              .append(jq('<td>').append(item.date))
                              .append(jq('<td>').append(item.enquiry_status))
                            );
                        });
                           }else {
                             alert("Invalid Number");
                           }
                          } 
                        });    
          }
  </script>
  <?php include 'footer.php'; ?>

在我的表格标记中的上述代码中，我只有标题，数据来自 jquery ajax 成功。 在移动视图中，表格数据显示在表格外。 我在我的桌子上应用了一些风格，但没有工作。 我在我的标题中使用 bootstrap 3 文件。 我不知道我的代码哪里错了。

【问题讨论】：

• 在

  之后添加
• 在上图中显示了表格外的数据这个假设是完全错误的——表格被拉伸是因为你的内容太长了——这就是表格的本质——你这里有几个选项 - 像 faizan 说的那样包裹一个 div，或者为您的移动视图删除一些列