将HTML表格标题与表格数据行对齐

我有一些HTML代码，可以生成带有标题和数据行的HTML表。标题列与数据列不对齐

我从网上找到的一个例子中得到了这段代码。我希望标题单元格宽度与表的数据单元格宽度匹配

下面的代码是JSFIDLE:

HTML

为什么标题没有与下面的数据列对齐？

检查CSS：

  table.scrollable thead th tr {
    left: 0; top: 0;
    position: absolute;
    width: auto;
    }

我添加了

th

此外，删除了

填充顶部：1.7em从

 div.scrollableContainer { 
    position: relative; 
    width: 80%; 
    padding-top: 1.7em; 
    margin: 40px;    
    border: 1px solid #999;
    background: black;
    }

删除顶部的黑色空间。它应该可以工作（在Chrome中测试）。
我最终使用了datatables插件（datatables.net）。
谢谢Sable Foste，但这不是我要找的，我希望标题是固定的。然后我很困惑。。。在你的小提琴，它看起来像你有你想要的，只有列没有与表体对齐。它们按滚动条的宽度关闭。你想把滚动条弹出到整张桌子的左边吗？如果你在IE7上打开我的小提琴。。。这就是我想要的。但它在IE8或IE9上不起作用。在IE8和IE9上，thead列与tbody列不对齐。你解决了这个问题吗？我最终使用了datatables插件（datatables.net）。
  table.scrollable thead th tr {
    left: 0; top: 0;
    position: absolute;
    width: auto;
    }

 div.scrollableContainer { 
    position: relative; 
    width: 80%; 
    padding-top: 1.7em; 
    margin: 40px;    
    border: 1px solid #999;
    background: black;
    }