＆＃39;响应＆＃39;并且＆＃39;固定在顶部＆＃39;表头：从jQuery到AngularJS

Question

我正在制作一张桌子，我想要实现它的标头保持fixed at TOP。我已经尝试在jQuery中执行一个实现，它似乎正在工作但是...我有以下问题：

1. 如果不写css，表头<td>元素缩小为 它的元素宽度

2. 我必须写很多media-queries来满足不同的设备（我很累）

3. 没有回复。

  

以下是 jQuery 中已经实现的 plunkr ：
  http://plnkr.co/edit/JLkIsHNsIoLkZk5LanrK?p=info

$(function() {
  var table = $('table'),
      thead = table.find('thead'),
      fixed_thead,
      the_window = $(window);

  thead.find('td').each(function() {
    var el = $(this);
    el.css('width', el.Width());
  });

  fixed_thead = thead.clone().hide();
  thead.after(fixed_thead);

  fixed_thead.css({
    'position': 'fixed',
    'top': 0,
    'width': thead.width()
  });

  the_window.scroll(function() {
    if (the_window.scrollTop() > table.offset().top) {
      fixed_thead.show();
    } else {
      fixed_thead.hide();
    }

  });
});

我现在想要实现同样的行为，当我们有10列和一个大数据集来填充表但使用 AngularJS 。