CODEWITHSUNDEEP
csstwitter-bootstraphtml-table
Kleber Mota
Kleber Mota

Reputation: 9055

Columns in Table not aligned properly

I have this html styled with bootstrap. My problem is that the row inside thead is not aligned with the row inside tbody (see the jsfiddle link to see an example of what's happening):

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

this code is based on the first example available here: https://getbootstrap.com/docs/4.4/content/tables/. I tried change the line:

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

inside tbody to:

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

but the same issue occurs.

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

Anyone can tell how to fix that?

Upvotes: 0

Views: 451

Answers (2)

Rahul
Rahul

Reputation: 2071

You can't use tbody display: block;. tbody display property will be table-row-group.

So removed style="display: block;" from tbody tag. Check here working example

Upvotes: 1

Amaresh S M
Amaresh S M

Reputation: 3010

Remove display: block; css property from tbody tag

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

Upvotes: 1

Related Questions