bootstrap-table 请问标题和数据为什么会对不上,谁遇到这样的问题了。

HTML代码:
H~8V_MOP170USBC5N5]]ZBI.png

Js代码:
image.png

显示结果:
image.png

目前知道的第二行跨行就会出现这个问题,请问这个是插问题还是数据问题,求解?

阅读 1.2k
评论
    2 个回答

    Hello,弄下来感觉问题出在了牵引状态这个占了两行两列然后引起了问题,把它改成一行一列就可以了。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>表格</title>
      <link href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet">
      <link href="https://cdn.bootcss.com/bootstrap-table/1.16.0/bootstrap-table.css" rel="stylesheet">
      <style>
        body {
          margin: 0;
          overflow-x: hidden;
          font-size: 14px;
          background-color: #0f111d;
          font-family: "Rubik", sans-serif;
        }
        .table-wrapper {
          padding: 50px;
        }
        .table th, .table td{
          color: #fff;
          padding: .5rem .2rem !important;
        }
      </style>
    </head>
    <body>
      <div class="container-fluid">
        <div class="layout-body">
          <!-- 表格数据 -->
          <div class="table-wrapper" id="main-wrapper">
            <!-- 表格 -->
            <table class="" id="exampleTableFromData">
              <thead>
                <tr>
                  <th data-valign="middle" data-align="center" data-field="state" data-checkbox="true" rowspan="3"></th>
                  <th data-valign="middle" data-align="center" data-field="ip_segment" rowspan="3">IP段</th>
                  <th data-valign="middle" data-align="center" data-field="attack_status" rowspan="3">攻击状态</th>
                  <th data-valign="middle" data-align="center" data-field="business_type" rowspan="3">业务类型</th>
                  <th data-valign="middle" data-align="center" rowspan="1" colspan="2">牵引状态</th>
                  <th data-valign="middle" data-align="center" colspan="10">基础策略</th>
                </tr>
                <tr>
                  <th data-valign="middle" data-align="center" rowspan="2" data-field="status_pl_wall">普通墙</th>
                  <th data-valign="middle" data-align="center" rowspan="2" data-field="status_jd_wall">节点墙</th>
                  <th data-valign="middle" data-align="center" colspan="3">人工调优</th>
                  <th data-valign="middle" data-align="center" colspan="2">牵引类型</th>
                  <th data-valign="middle" data-align="center" colspan="2">牵引时长</th>
    
                  <th data-valign="middle" data-align="center" data-field="clean_aids" rowspan="2">清洗辅助</th>
                  <th data-valign="middle" data-align="center" data-field="seal_line" rowspan="2">封停线路</th>
                  <th data-valign="middle" data-align="center" data-field="default_line" rowspan="2">默认线路</th>
                </tr>
                <tr>
                  <th data-valign="middle" data-align="center" data-field="seal_time" class="edit-mode">封停时长</th>
                  <th data-valign="middle" data-align="center" data-field="seal_max" class="edit-mode">封停MAX</th>
                  <th data-valign="middle" data-align="center" data-field="defense_time" class="edit-mode">防御时长</th>
    
                  <th data-valign="middle" data-align="center" data-field="lx_pt_wall" class="edit-mode">普通墙</th>
                  <th data-valign="middle" data-align="center" data-field="lx_jd_wall" class="edit-mode">节点墙</th>
                  <th data-valign="middle" data-align="center" data-field="sc_pt_wall" class="edit-mode">普通墙</th>
                  <th data-valign="middle" data-align="center" data-field="sc_jd_wall" class="edit-mode">节点墙</th>
                </tr>
              </thead>
                
            </table>
          </div>
        </div>
      </div>
      <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.slim.min.js"></script>
      <script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
      <script src="https://cdn.bootcss.com/bootstrap-table/1.16.0/bootstrap-table.js"></script>
      <script>
        $('table').bootstrapTable('resetView');
        let data = [{
          'ip_segment': '192.168.11.0/24',
          'attack_status': 'DDOS攻击',
          'business_type': '普通高防段',
          'status_pl_wall': '牵引',
          'status_jd_wall': '锁定',
          'seal_time': 25,
          'seal_max': 10,
          'defense_time': 1800,
          'lx_pt_wall': '锁定',
          'lx_jd_wall': '锁定',
          'sc_pt_wall': 1800,
          'sc_jd_wall': 300,
          
          'clean_aids': '是',
          'seal_line': 'CT,NTT,VOX',
          'default_line': 'CT,NTT,VOX',
        }]
        $('#exampleTableFromData').bootstrapTable({
          
          data: data,
          height: "600"
        });
      </script>
    </body>
    </html>
    

    希望能帮助到你。

      @范捷琦Jackie

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>表格</title>
          <link href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet">
          <link href="https://cdn.bootcss.com/bootstrap-table/1.16.0/bootstrap-table.css" rel="stylesheet">
          <style>
              body {
                  margin: 0;
                  overflow-x: hidden;
                  font-size: 14px;
                  background-color: #0f111d;
                  font-family: "Rubik", sans-serif;
              }
              .table-wrapper {
                  padding: 50px;
              }
              .table th, .table td{
                  color: #fff;
                  padding: .5rem .2rem !important;
              }
          </style>
      </head>
      <body>
          <div class="container-fluid">
              <div class="layout-body">
                  <!-- 表格数据 -->
                  <div class="table-wrapper" id="main-wrapper">
                      <!-- 表格 -->
                      <table class="" id="exampleTableFromData">
                          <thead>
                              <tr>
                                  <th data-width="20" data-valign="middle" data-align="center" data-field="state" data-checkbox="true" rowspan="3"></th>
                                  <th data-width="100" data-valign="middle" data-align="center" data-field="ip_segment" rowspan="3">IP段</th>
                                  <th data-width="100" data-valign="middle" data-align="center" data-field="attack_status" rowspan="3">攻击状态</th>
                                  <th data-width="100" data-valign="middle" data-align="center" data-field="business_type" rowspan="3">业务类型</th>
                                  <th data-valign="middle" data-align="center" rowspan="2" colspan="2">牵引状态</th>
                                  <th data-valign="middle" data-align="center" colspan="10">基础策略</th>
                              </tr>
                              <tr>
                                  <th data-valign="middle" data-align="center" colspan="3">人工调优</th>
                                  <th data-valign="middle" data-align="center" colspan="2">牵引类型</th>
                                  <th data-valign="middle" data-align="center" colspan="2">牵引时长</th>
      
                                  <!-- 这里跨两行就有问题 -->
                                  <th data-valign="middle" data-align="center" data-field="clean_aids" rowspan="2">清洗辅助</th>
                                  <th data-valign="middle" data-align="center" data-field="seal_line" rowspan="2">封停线路</th>
                                  <th data-valign="middle" data-align="center" data-field="default_line" rowspan="2">默认线路</th>
                              </tr>
                              <tr>
                                  <th data-valign="middle" data-align="center" data-field="status_pl_wall">普通墙</th>
                                  <th data-valign="middle" data-align="center" data-field="status_jd_wall">节点墙</th>
      
                                  <th data-valign="middle" data-align="center" data-field="seal_time" class="edit-mode">封停时长</th>
                                  <th data-valign="middle" data-align="center" data-field="seal_max" class="edit-mode">封停MAX</th>
                                  <th data-valign="middle" data-align="center" data-field="defense_time" class="edit-mode">防御时长</th>
      
                                  <th data-valign="middle" data-align="center" data-field="lx_pt_wall" class="edit-mode">普通墙</th>
                                  <th data-valign="middle" data-align="center" data-field="lx_jd_wall" class="edit-mode">节点墙</th>
                                  <th data-valign="middle" data-align="center" data-field="sc_pt_wall">普通墙</th>
                                  <th data-valign="middle" data-align="center" data-field="sc_jd_wall">节点墙</th>
                              </tr>
                          </thead>
                          
                      </table>
                  </div>
              </div>
          </div>
          <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.slim.min.js"></script>
          <script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
          <script src="https://cdn.bootcss.com/bootstrap-table/1.16.0/bootstrap-table.js"></script>
          <script>
              $('table').bootstrapTable('resetView');
              let data = [{
                  'ip_segment': '192.168.11.0/24',
                  'attack_status': 'DDOS攻击',
                  'business_type': '普通高防段',
                  'status_pl_wall': '牵引',
                  'status_jd_wall': '锁定',
                  'seal_time' : 25,
                  'seal_max' : 10,
                  'defense_time' : 1800,
                  'lx_pt_wall': '锁定',
                  'lx_jd_wall': '锁定',
                  'sc_pt_wall' : 1800,
                  'sc_jd_wall' : 300,
                  
                  'clean_aids' : '是',
                  'seal_line': 'CT,NTT,VOX',
                  'default_line': 'CT,NTT,VOX',
              }]
              $('#exampleTableFromData').bootstrapTable({
                  
                  data: data,
                  height: "600"
              });
          </script>
      </body>
      </html>
        撰写回答

        登录后参与交流、获取后续更新提醒