fix(table): invented a helper class to solve the styling logic when rowspan is used in tables

The styling is sometimes broken in the table element, when rowspan used. This confused later table rows which then usually have less columns.

As there is no way to look backward via CSS to find out if a previous column in a row was rowspanned and the table component is not a JS module, i invented a little helper class to solve this issue via pure html/css.

One just has to create a td node , where it is usually not necessary, and give it the new rowspanned class. This will just hide it from the screen but all existing table classes are working again, because the amount of td remains the same just like if there was no rowspan used at all.

Author: lubber-de

src/definitions/collections/table.less

@@ -59,6 +59,12 @@
   transition: @transition;
 }
 
+/* Rowspan helper class */
+.ui.table th.rowspanned,
+.ui.table td.rowspanned {
+  display:none;
+}
+
 /* Headers */
 .ui.table > thead {
   box-shadow: @headerBoxShadow;
@@ -180,13 +186,13 @@
   .ui.table:not(.unstackable) > tbody,
   .ui.table:not(.unstackable) > tr,
   .ui.table:not(.unstackable) > tbody > tr,
-  .ui.table:not(.unstackable) > tr > th,
-  .ui.table:not(.unstackable) > thead > tr > th,
-  .ui.table:not(.unstackable) > tbody > tr > th,
-  .ui.table:not(.unstackable) > tfoot > tr > th,
-  .ui.table:not(.unstackable) > tr > td,
-  .ui.table:not(.unstackable) > tbody > tr > td,
-  .ui.table:not(.unstackable) > tfoot > tr > td {
+  .ui.table:not(.unstackable) > tr > th:not(.rowspanned),
+  .ui.table:not(.unstackable) > thead > tr > th:not(.rowspanned),
+  .ui.table:not(.unstackable) > tbody > tr > th:not(.rowspanned),
+  .ui.table:not(.unstackable) > tfoot > tr > th:not(.rowspanned),
+  .ui.table:not(.unstackable) > tr > td:not(.rowspanned),
+  .ui.table:not(.unstackable) > tbody > tr > td:not(.rowspanned),
+  .ui.table:not(.unstackable) > tfoot > tr > td:not(.rowspanned) {
     display: block !important;
     width: auto !important;
   }
@@ -469,13 +475,13 @@
     .ui[class*="tablet stackable"].table > tbody,
     .ui[class*="tablet stackable"].table > tbody > tr,
     .ui[class*="tablet stackable"].table > tr,
-    .ui[class*="tablet stackable"].table > thead > tr > th,
-    .ui[class*="tablet stackable"].table > tbody > tr > th,
-    .ui[class*="tablet stackable"].table > tfoot > tr > th,
-    .ui[class*="tablet stackable"].table > tr > th,
-    .ui[class*="tablet stackable"].table > tbody > tr > td,
-    .ui[class*="tablet stackable"].table > tfoot > tr > td,
-    .ui[class*="tablet stackable"].table > tr > td  {
+    .ui[class*="tablet stackable"].table > thead > tr > th:not(.rowspanned),
+    .ui[class*="tablet stackable"].table > tbody > tr > th:not(.rowspanned),
+    .ui[class*="tablet stackable"].table > tfoot > tr > th:not(.rowspanned),
+    .ui[class*="tablet stackable"].table > tr > th:not(.rowspanned),
+    .ui[class*="tablet stackable"].table > tbody > tr > td:not(.rowspanned),
+    .ui[class*="tablet stackable"].table > tfoot > tr > td:not(.rowspanned),
+    .ui[class*="tablet stackable"].table > tr > td:not(.rowspanned)  {
       display: block !important;
       width: 100% !important;
     }