Как сделать таблицу TreeView отзывчивой

Привет, ниже моя структура таблиц дерева, я хотел бы сделать это как reponsive 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

Вы можете использовать Bootstrap для создания гибкой таблицы.

базы подписки:

<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

Ни в коем случае @sachin в этом scenarion я есть approxmatly 12 ТР это нужно, чтобы получить коллапс – Lier

Форматирование HTML правильно с <tr>...</tr> вокруг <th>..</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 - это Applaying, но вещь после разрешения 700px - это не все отзывчивые вещи, являющиеся статическими. – Lier

(+) на вашем изображении показывает, что отзывчивый работает, но данные, не согласованные под заголовками, заставляют меня думать, что есть неправильное форматирование html. Можете ли вы предоставить код, который вы используете, с данными xyz 123 на изображении? (Вы выполнили фрагмент кода моего кода и видите, что (+) работают?) –

Как сделать таблицу TreeView отзывчивой

ответ

Смежные вопросы