What's the best way to have a table with sticky header?

What I'm currently doing is 2 tables, one for headers and one for data, in combination with table-layout:fixed and fixed widths for each column.

I don't like that solution since I have to keep adjusting widths and they don't look as good a the auto adjusted ones you get when the table layout isn't fixed.

I also considered a JS solution where the data table is laid out, then JS picks up each column width and applies it to the header table. The advantage of this is fluid td widths dictated by content. The problem is table contents can change dynamically, and the JS script needs to know that so it can recompute the widths... ew.

Is there a better way of doing that?

You can use some plugins like jQuery Plugin for Fix Header Table

or if you want the pure CSS way, and want to know how it works, you can try the below fiddle https://jsfiddle.net/dPixie/byB9d/3/light/.

In short: it's all about wrapping the content in a div which is inside the TH/TD.

th {
  height: 0;
  line-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  color: transparent;
  border: none;
  white-space: nowrap;
}
th div {
  position: absolute;
  background: transparent;
  color: #fff;
  padding: 9px 25px;
  top: 0;
  margin-left: -25px;
  line-height: normal;
  border-left: 1px solid #800;
}
th:first-child div{
  border: none;
}