thead and tbody doesnt fit

Question

let me ask about the table on the CSS,

I've searched my best on google and related articles on StackOverflow but still can't find the way I want it to work,

I currently get an assignment with the following conditions:

scrollable tbody,
Thead is given a background color and a border for the tbody

I have done everything, but now there is a new constraint, the data in the tbody and thead columns cannot be aligned.

here's my snippet for html:

table {
  font-size: medium;
}

.table-contract {
  border-radius: 20px;
  box-shadow: 0 0 0 3px var(--uwongke-tertiary-color);
  border-collapse: collapse;
  table-layout: fixed;
  empty-cells: show;
}

.table-contract thead th {
  background: var(--uwongke-tertiary-color);
  box-shadow: 0 0 0 1px var(--uwongke-tertiary-color);
  color: var(--uwongke-light);
}

.table-contract thead th:first-child {
  background: var(--uwongke-tertiary-color);
  border-top-left-radius: 20px;
}

.table-contract thead th:last-child {
  background: var(--uwongke-tertiary-color);
  border-top-right-radius: 20px;
}

.table-contract tr th,
.table-contract tr td {
  padding: 1.25rem;
  text-align: center;
  vertical-align: middle;
}

.table-contract td.desc {
  width: 50%;
}

.table-contract,
.table-contract th,
.table-contract td {
  border-collapse: collapse;
}


/* .table-contract thead, */

.table-contract tbody {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

.table-contract tbody {
  overflow-y: scroll;
  overflow-x: hidden;
  height: 50rem;
  box-shadow: 0px 3px 15px 0px rgb(0 0 0 / 5%);
  padding-bottom: 2rem;
}

.table-contract tr {
  width: 100%;
  display: table;
  box-sizing: border-box;
}

<table class="table table-hover table-borderless text-center mb-0 table-contract">
  <thead class="text-capitalize">
    <tr>
      <th scope="col" class="">&nbsp;</th>
      <th scope="col" class="">No</th>
      <th scope="col" class="">pasal</th>
      <th scope="col" class="desc">deskripsi</th>
      <th scope="col" class="">modifikasi</th>
      <th scope="col" class="">aksi</th>
    </tr>
  </thead>
  <tbody class="text-capitalize" id="table_drag">

    <tr class="sorted-row">
      <td>=</td>
      <td>1</td>
      <td class="judul-bab">pasal 1</td>
      <td class="desc">merupakan isi untuk pasal yang berkaitan dengan aturan aturan perusahaan untuk pegawai dan ketetapan lainnya</td>
      <td>27 jan, 09:57am</td>
      <td>
        <div class="row justify-content-center">
          <button class="btn btn-edit" onclick="edit(this)"><i class="fa fa-edit fa-2x"></i></button>
          <button class="btn btn-delete" data-toggle="modal" data-target="#modalDelete"><i class="fa fa-trash fa-2x"></i></button>
        </div>
      </td>
    </tr>
    <tr class="sorted-row">
      <td>=</td>
      <td>2</td>
      <td class="judul-bab">pasal 2</td>
      <td class="desc">merupakan isi untuk pasal yang berkaitan dengan aturan aturan perusahaan untuk pegawai dan ketetapan lainnya</td>
      <td>27 jan, 09:57am</td>
      <td>
        <div class="row justify-content-center">
          <button class="btn btn-edit"><i class="fa fa-edit fa-2x"></i></button>
          <button class="btn btn-delete"><i class="fa fa-trash fa-2x"></i></button>
        </div>
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="6">
        <button class="btn btn-add">tambah&nbsp;<i class="fa fa-plus"></i></button>
      </td>
    </tr>
    <tr id="saveChanges">
      <td colspan="6">
        <button class="btn btn-primary">Simpan Perubahan</button>
      </td>
    </tr>
  </tfoot>
</table>

my expectation:

my result :

all i want : thead and tbody column are straight position, being in one lane is not off the mark

Don't set width of td, add width on th according to your need. — Sunil R.

Pravesh Pansari Pravesh Pansari · Accepted Answer · 2021-02-04T08:34:00

0

votes

You specified the width only for the td.desc.

.table-contract th.desc { width: 50%; }

thead and tbody doesnt fit

2 Answers