Bootstrap 4，thead和tr不对齐

Question

我有这个页面与jquery，bootstrap 4表

这是网址http://vault.shopshop.space/

当我点击下拉列表选择不同的日期时，我的jquery将删除tbody并附加一些新的数据行，例如<tr><td>...</td></tr>

初始加载（全屏好）

选择过滤器后（不好，没有对齐）

Answer 1

在<thead>中追加<tbody>元素。您应该清空<tbody>，然后在<tbody>中追加表行。

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

然后追加<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/）