Bootstrap 响应表上的粘性表头

Question

我正在尝试创建一个粘性表头。使用此 CSS 代码，它可以在标准表格上完美运行（它将一直粘到表格底部。

th {
  background: white;
  position: sticky;
  top: 0;
}

但是，我需要表格能够响应移动设备（能够向右滚动）。不幸的是，当我添加引导表响应类时，它不再起作用（请参阅我的https://jsfiddle.net/b8x16eht/）

如何让它在移动设备和桌面设备上运行（无需设置固定高度）

编辑：感谢@UfguFugullu 指出了另一种可能的解决方案，这是一种改进。它适用于桌面，但它仍然无法在响应模式下工作（当从较小的窗口查看时）。此处更新了小提琴： https: //jsfiddle.net/aqfjozrm/

.table-sticky th {
  background: #fff;
  position: sticky;
  top: -1px;
  z-index: 990;
}

我设法找到一个网站，它可以在响应式表格和全宽上工作，尽管它没有使用引导程序https://www.timeanddate.com/weather/new-zealand/auckland/hourly

我开始认为我们需要添加一个 JavaScript 侦听器来从正文中偏移标题位置，然后更新标题的顶部位置样式。这里有 js 大师吗:)？