Add table cell borders

Author: annda

js_src/components/TableComponent.js

@@ -15,7 +15,7 @@ export class TableComponent extends BaseComponent {
         const tableElement = document.createElement('table');
         // like fieldsets, tables need a name for building full dotted paths
         tableElement.name = this.config.name;
-        tableElement.classList.add('table');
+        tableElement.classList.add('table', 'is-v-separated');
 
         const headRow = this.#getHeadRow();
 

public/css/style.css

@@ -57,7 +57,9 @@ table {
         & .column {
             padding: unset;
         }
-
+        &.is-v-separated td {
+            border-left: 1px solid #000;
+        }
     }
 
     /* hide labels, tooltips and modals in cells, as they are visible once per row in <th> */
@@ -278,3 +280,9 @@ div.tabs-container fieldset:not(fieldset fieldset) legend {
 .column.is-1 > .field > .control > .select select {
     min-width: 5rem;
 }
+
+/* make dropdown selects take full width in table cells */
+table td .select,
+table td .select select {
+    width: 100%;
+}