css - 表中的列未正确对齐

Question

我用 bootstrap 设置了这个 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/

谁能告诉我如何解决这个问题？

Answer 1

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

因此从 tbody 标签中删除了 style="display: block;"。点这里working example