Question

下面是我的树表结构我想把它作为reponsive table.i在我的表中有树网格，所以虽然数据表响应正在应用响应不工作扩展崩溃不工作

＆＃13;

<table class="tree display responsive no-wrap">
  <thead>
    <tr>
    <th>name</th>
    <th>class</th>
    <th>Remark</th>
    <th>xyz</th>
    <th>zyz</th>
    <th>zyz</th>
    </tr>
  </thead>
  <tbody>
    <tr>
    <td>somethigThing</td>
    <td>somethigvalue</td>
    </tr>
    <tr>
    <td>somethigThing</td>
    <td>somethigvalue</td>
    </tr>
    <tr>
    <td>somethigThing</td>
    <td>somethigThing</td>
    <td>somethigvalue</td>
   <td>somethigThing</td>
    <td>somethigThing</td>
    <td>somethigvalue</td>
    </tr>
    <tr>
    <td>somethigThing</td>
    <td>somethigvalue</td>
    </tr>
    <tr>
    <td>somethigThing</td>
    <td>somethigvalue</td>
    </tr>
    <tr>
    <td>somethigThing</td>
    <td>somethigThing</td>
    <td>somethigvalue</td>
    <td>somethigThing</td>
    <td>somethigThing</td>
    <td>somethigvalue</td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 1

使用<tr>...</tr>围绕<th>..</th>（＆amp; end <th>正确显示）正确格式化HTML，如图所示＆amp;在头部和周围添加<thead>..</thead>身体周围<tbody>...</tbody>并添加代码以自动添加缺失的<td></td>：

＆＃13;

$(document).ready(function() {
    // Add missing <td></td> according to number of columns found in head
    var numTd = $('th').length;
    console.log('Number of columns found in head =: ', numTd);
    $('tbody tr').each(function()
    {
        var i = $(this).find('td').length;
        while(i < numTd)
        {
            $(this).append('<td></td>');
            i++;
        }
    });
    
    $('.tree').DataTable();
} );

＆＃13;

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.dataTables.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>

<table class="tree display responsive no-wrap">
  <thead>
    <tr>
    <th>name</th>
    <th>class</th>
    <th>Remark</th>
    <th>xyz</th>
    <th>zyz</th>
    <th>zyz</th>
    </tr>
  </thead>
  <tbody>
    <tr>
    <td>somethigThing</td>
    <td>somethigvalue</td>
    </tr>
    <tr>
    <td>somethigThing</td>
    <td>somethigvalue</td>
    </tr>
    <tr>
    <td>somethigThing</td>
    <td>somethigThing</td>
    <td>somethigvalue</td>
   <td>somethigThing</td>
    <td>somethigThing</td>
    <td>somethigvalue</td>
    </tr>
    <tr>
    <td>somethigThing</td>
    <td>somethigvalue</td>
    </tr>
    <tr>
    <td>somethigThing</td>
    <td>somethigvalue</td>
    </tr>
    <tr>
    <td>somethigThing</td>
    <td>somethigThing</td>
    <td>somethigvalue</td>
    <td>somethigThing</td>
    <td>somethigThing</td>
    <td>somethigvalue</td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 2

您可以使用Bootstrap创建响应表。

<强> Examlpe：

<head>
<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<div class="table-responsive container">
<table class="table table-inverse">
  <tbody>
  <th>name<th>
  <th>class<th>
  <th>Remark<th>
    <tr>
    <td>somethigThing</td>
    <td>somethigvalue</td>
    </tr>
    <tr>
    <td>somethigThing</td>
    <td>somethigvalue</td>
    </tr>
    <tr>
    <td>somethigThing</td>
    <td>somethigThing</td>
    <td>somethigvalue</td>
    </tr>
    <tr>
    <td>somethigThing</td>
    <td>somethigvalue</td>
    </tr>
    <tr>
    <td>somethigThing</td>
    <td>somethigvalue</td>
    </tr>
    <tr>
    <td>somethigThing</td>
    <td>somethigThing</td>
    <td>somethigvalue</td>
    </tr>
  </tbody>
  </table>
  </div>

如何使树视图表响应

2 个答案: