时间戳

首页 > 解决方案 > 表中的列未正确对齐

css - 表中的列未正确对齐

问题描述

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

任何人都可以告诉如何解决这个问题？

标签： csstwitter-bootstraphtml-table

解决方案

你不能使用tbody display: block;. tbody display财产将table-row-group。

所以style="display: block;"从tbody标签中删除。检查here工作示例

推荐阅读