HTML <table> 固定式的 <thead>

結論

用個 <div> 包 <table>，<div> 設定 max-height，overflow: auto。

<table> 設定 table-layout: fixed。
<thead> 設 position: sticky， top: 0。
<thead> 內 <th> 都要設 width 。
然後 Chrome 有 bug 所以不能用，改 <th> 設 position: sticky， top: 0。
Firefox 沒問題。

緣由

從以前到現在一直都有頁面上的表格，想要 Excel 凍結列的效果，

想說現在瀏覽器規格和技術都很進步了，應該搞得出來。

我又有潔癖，只想要純 CSS 技術，jQuery 就不接受。

方案

找了很多方案，都是針對 <th> 設 position: sticky。

單行標題還沒問題，若是多行標題就不行了。

覺得很奇怪，為何不設在 <thead> ？

設在 <thead> 在 Chrome 不行，覺得不合理。

找了一下原來是一個拖了很久的 bug https://bugs.chromium.org/p/chromium/issues/detail?id=702927。

試了 Firfox 沒問題，就此結案。

標準版

https://codepen.io/tompipen/pen/rgKwBx

Chrome

https://codepen.io/tompipen/pen/byKryo

可以看到多行的表現有多醜。

混合堪用版
https://codepen.io/tompipen/pen/wbXrKP
多行在 Chrome 的表現還是很醜，Firefox 完美。