表中的列未正确对齐答案

【问题标题】：Columns in Table not aligned properly表中的列未正确对齐
【发布时间】：2019-12-14 23:03:05
【问题描述】：

我有这个带有引导程序样式的 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/

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

【问题讨论】：

标签： css twitter-bootstrap html-table

【解决方案1】：

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

因此从tbody 标记中删除了style="display: block;"。在这里查看working example

【讨论】：

【解决方案2】：

从 tbody 标签中移除 display: block; css 属性

<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"  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>

【讨论】：