如何使一个treeview表响应

嗨下面是我的树表结构我想使这个作为响应table.i有树格在我的表中虽然datatable响应应用响应不工作扩展崩溃不工作如何使一个treeview表响应

<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>

来源

2017-02-06 Lier

您可以使用引导程序来创建响应表。

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>

来源

2017-02-06 06:50:41 sachin

没有在这个scenarion方式@sachin我有approxmatly 12 TR的它需要得到崩溃 – Lier

格式的HTML正确地（正常如图&末<th>）<tr>...</tr>周围<th>..</th> &添加<thead>..</thead>周围头& <tbody>...</tbody>围绕身体和添加代码自动添加失踪<td></td>：

$(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(); 
 
});

<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>

来源

2017-02-06 09:28:26

请检查更新 - 忘记responive LIB - 现在加入 –

我感谢您的支持，但遗憾地说，它不工作的DataTable是应用程序，但在700px后的事情解决方案并不是所有的响应式事物都是静态的。 – Lier

图像中的（+）表明响应正在工作 - 但标题下未对齐的数据使我认为存在错误的html格式。你能提供你使用的代码与图像中的xyz 123数据吗？（你运行了我的代码的代码片段，看到（+）正在工作吗？） –

如何使一个treeview表响应

回答

相关问题