问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
久爱不腻
    27411

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

    Js代码：
    image.png

    显示结果：
    image.png

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

    bootstrap-tablejquery前端bootstraptable
    阅读 4.6k
    2 个回答
    得票最新
    头像
    范捷琦Jackie
      2.1k4524
      ✓ 已被采纳

      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>

      希望能帮助到你。

      头像
      久爱不腻
        27411

        @范捷琦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>
        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题
        宣传栏