Fixed 'thead' width doesn't match with the 'tbody' width

Question

I have a table that has the <thead> fixed, but each <th> in it doesn't match with the width of the respective columns (<td> in the <tbody>).

If you need more info just ask me. Thanks in advance.

EDIT: This is the jsfiddle

Answer 1

Adding table-layout:fixed to the table and display:table to the thead fixes your problem.

Modified CSS:

table thead {
  display:table;
  width: 100%;
  background-color: lightblue;
  position: fixed;
}
table{
  table-layout:fixed;
}

This is kind of a sloppy fix though, since the table-layout:fixed affects the entire layout and might not look how you want it to.

You could also set percentage widths on the columns instead of using table-layout:fixed for more control over the layout.