Bootstrap 4, thead и tr не выравниваются

Question

У меня есть эта страница с таблицей jquery, bootstrap 4

Вот URL http://vault.shopshop.space/

Когда я нажимаю на выпадающий список, чтобы выбрать разные дни, мой jquery удалит tbody и добавит несколько новых строк данных, например, <tr><td>...</td></tr>

Начальная загрузка (полноэкранный режим)

После выбора фильтра (не хорошо, thead не выровнен)

Answer 1

Вы добавляете элемент <<strong> tbody > в <<strong> thead >. Вам следует очистить <<strong> tbody >, а затем добавить строки таблицы в <<strong> tbody >.

<table>
   <thead>
       <tr>
        <th>col 1</th>
        <th>col 2</th>
        <th>col 3</th>
       </tr>
   </thead>
   <tbody>
       <!-- Empty -->
   </tbody>
</table>

затем добавьте в <<strong> tbody >:

$("tbody").append("<tr>
           <td>col 1<td><td>col 2<td><td>col 3<td>
           </tr>")

Answer 2

Присмотритесь: tbody меньше thead:

И как результат:

Вы должны добавить в таблицу или использовать insertAfter (http://api.jquery.com/insertafter/)