表中的列未正确对齐

Question

我有这个带有引导程序样式的html。我的问题是thead内的行与tbody内的行未对齐（请参阅jsfiddle链接以查看发生的情况的示例）：

<table class="table">
  <thead>
    <tr id="table-header">
      <th scope="col">#</th>
      <th class="search" scope="col">nome</th>
      <th scope="col">
      </th>
    </tr>
  </thead>

  <tbody id="table-body" style="display: block;" data-json="/categoria/list.json">
    <tr>
      <th scope="row">1</th>
      <td>hum</td>
      <td>
        <div class="btn-group" id="buttons" role="group" aria-label="comandos">
          <button sec:authorize="hasPermission(#user, 'atualiza_categoria')" type="button" class="btn btn-secondary" id="update" th:attr="data-url=@{/categoria/update}" onclick="open_tab(this)">
            edit
          </button>
          <button sec:authorize="hasPermission(#user, 'remove_categoria')" type="button" class="btn btn-secondary" id="delete" th:attr="data-url=@{/categoria/delete}" onclick="open_tab(this)">
            del
          </button>
        </div>
      </td>
    </tr>
  </tbody>

  <tbody id="table-search" style="display: none;" data-json="/categoria/search.json"></tbody>
</table>

此代码基于此处提供的第一个示例：https://getbootstrap.com/docs/4.4/content/tables/。我尝试更改线：

<th scope="row">1</th>

在tbody内部以：

<td scope="row">1</td>

但是出现相同的问题。

jsfiddle：https://jsfiddle.net/klebermo/0gdtf7qy/

任何人都可以知道如何解决该问题吗？]

我有这个用bootstrap样式的html。我的问题是thead内的行与tbody内的行未对齐（请参阅jsfiddle链接以查看发生的情况的示例）：

Answer 1

从

display：block;

Answer 2

您不能使用tbody display: block;。tbodydisplay属性将为table-row-group。