specify interactive-table to be used on table tag only

It was formerly used on the container elements as well which looked to be ok on first glance but failed to calculate the
table width correctly.

app/assets/stylesheets/content/_table.lsg

@@ -4,9 +4,9 @@
 [WP tables](http://localhost:8080/assets/css/styleguide.html#with-work-packages)
 
 ```
-<div class="generic-table--container" interactive-table>
+<div class="generic-table--container">
   <div class="generic-table--results-container" style="max-height: 340px;">
-    <table role="grid" class="generic-table">
+    <table role="grid" class="generic-table" interactive-table>
       <colgroup>
         <col highlight-col>
         <col highlight-col>

app/assets/stylesheets/content/_work_packages_table.lsg

@@ -3,9 +3,9 @@
 ## with work packages
 
 ```
-<div class="generic-table--container work-package-table--container" interactive-table>
+<div class="generic-table--container work-package-table--container">
   <div class="generic-table--results-container">
-    <table class="generic-table">
+    <table class="generic-table" interactive-table>
       <colgroup>
         <col highlight-col>
         <col highlight-col>

frontend/app/templates/work_packages/work_packages_table.html

@@ -1,8 +1,7 @@
 <div class="generic-table--container work-package-table--container"
-  ng-class="{ '-with-footer': displaySums }"
-  interactive-table>
+  ng-class="{ '-with-footer': displaySums }">
   <div class="generic-table--results-container" ng-if="rows.length">
-    <table class="keyboard-accessible-list generic-table">
+    <table interactive-table class="keyboard-accessible-list generic-table">
       <colgroup>
         <col highlight-col />
         <col highlight-col ng-repeat="column in columns" />

frontend/app/ui_components/interactive-table-directive.js

@@ -31,17 +31,25 @@ module.exports = function($timeout, $window){
     restrict: 'A',
 
     link: function(scope, element) {
+      if (getTable().filter('table').length === 0) {
+        throw 'interactive-table needs to be defined on a \'table\' tag';
+      }
+
       function getTable() {
-        return element.find('table');
+        return element;
       }
 
       function getInnerContainer() {
-        return element.find('.generic-table--results-container');
+        return element.parent('.generic-table--results-container');
+      }
+
+      function getOuterContainer() {
+        return element.parent('.generic-table--container');
       }
 
       function getBackgrounds() {
-        return element.find('.generic-table--header-background,' +
-                            '.generic-table--footer-background');
+        return getInnerContainer().find('.generic-table--header-background,' +
+                                        '.generic-table--footer-background');
       }
 
       function getHeadersFooters() {
@@ -61,7 +69,7 @@ module.exports = function($timeout, $window){
         if (tableWidth > document.documentElement.clientWidth - scrollBarWidth) {
           tableWidth += scrollBarWidth;
         }
-        if (tableWidth > element.width()) {
+        if (tableWidth > getOuterContainer().width()) {
           // force containers to the width of the table
           getInnerContainer().width(tableWidth);
           getBackgrounds().width(tableWidth);