Fixed header table does not have and columns aligned

Question

I have a page with three tables, but one table has a lot of data and I decided to have a fixed header for the table. The fixed header works but the thead and tbody columns are not aligned, in other words the width of the header columns do not match the columns in tbody. Any help would be appreciated.

table {
  border-collapse: collapse;
  border-width: 1px 1px 1px 1px;
  border-style: solid;
}

table td {
  border-width: 1px 1px 1px 1px;
  border-style: solid;
  padding: 4px;
  text-align: left;
}

table th {
  border-width: 1px 1px 1px 1px;
  background-color: lightgray;
  border-style: solid;
  padding: 4px;
}

.fixed_header {
  border-collapse: collapse;
  border-width: 1px 1px 1px 1px;
  border-style: solid;
}

.fixed_header tbody {
  display: block;
  overflow: auto;
  height: 500px;
}

.fixed_header thead tr {
  display: block;
}

<table class="fixed_header">
  <thead>
    <tr>
      <th>COLUMN 1</th>
      <th>COLUMN 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> data for column 1</td>
      <td> data for column 2</td>
    </tr>
  </tbody>
</table>

Attaching the way it looks now. I dont want to add custom width to each element since my actual table has a lot of columns.

If you're working with tables, don't touch the display property of the table elements — Rainbow, Oct 10 '19 at 22:07
a beginning of an explanation maybe here https://stackoverflow.com/questions/23989463/how-to-set-tbody-height-with-overflow-scroll/23989771 — G-Cyrillus, Oct 10 '19 at 22:13

score 0 · Answer 1 · answered Oct 10 '19 at 22:09

You're explicitly telling it to use "display: block;" in your CSS, and so telling the browser not to lay it out like a table.

I think you're going to need to use something more complex, such as jQuery Datatables FixedHeader, which calculates how wide everything needs to be, and so handles it properly.

Fixed header table does not have and columns aligned

1 Answers1