Fix border issues for compact tables in FF

app/assets/stylesheets/content/_table.sass

@@ -205,7 +205,7 @@ html.-supports-sticky-headers
   height:       $generic-table--footer-height
 
 .generic-table--header-outer,
-.generic-table--sort-header-outer,
+.generic-table--sort-header-outer
   padding:      0 12px 0 6px
   line-height:  $generic-table--header-height
   height:  $generic-table--header-height

app/assets/stylesheets/layout/_work_package_table_embedded.sass

@@ -56,6 +56,30 @@ $table-timeline--compact-row-height: 28px
       &:hover
         @include varprop(background-color, table-row-highlighting-color)
 
+    // In FF there is bug (https://bugzilla.mozilla.org/show_bug.cgi?id=688556) which causes
+    // the border of tables to vanish once the background of table cells is set.
+    // Therefor we need to disable the automatic table border rendering with border-collapse: collapse and
+    // add the borders manually.
+    .work-package-table
+      border-collapse: separate
+      border: none
+      padding: 0
+
+      .wp-table--table-header:not(:last-of-type)
+        border-right: 0px solid #bbb
+        &:first-of-type
+          border-left: 1px solid #bbb
+
+      .wp-table--cell-td:not(:last-of-type)
+        border-right: 0px solid #bbb
+        &:first-of-type
+          border-left: 1px solid #bbb
+      .wp-table--row:not(:last-of-type)
+        .wp-table--cell-td
+          border-bottom: 0px solid #bbb
+
+
+    thead,
     .generic-table--sort-header-outer
       line-height: $table-timeline--compact-row-height
       height: $table-timeline--compact-row-height