improve cell border styling

cityssm · Jul 29, 2021 · a2b892d · a2b892d
1 parent 0c26342
commit a2b892d
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 61 deletions.
diff --git a/_sticky-table.scss b/_sticky-table.scss
@@ -1,48 +1,45 @@
-.table.has-sticky-header {
-  thead th {
-    @if $table-head-background-color == 'transparent' or $table-head-background-color == rgba(0, 0, 0, 0) {
-      background-color: $table-background-color;
-    }
+.table.has-sticky-header,
+.table.has-sticky-column {
+  border-collapse: separate;
 
-    position: sticky;
-    top: 0;
-    z-index: 1;
+  th,
+  td {
+    border-top-width: 0;
   }
 
   &.is-bordered {
-    border-collapse: separate;
+
+    border: $table-cell-border;
 
     th,
     td {
-      border-bottom-width: 0;
+      border-left-width: 0;
 
-      &:not(:last-child) {
+      &:last-child {
         border-right-width: 0;
       }
+    }
 
-      tbody tr:first-child & {
-        border-top-width: 0;
-      }
+    tbody tr:last-child th,
+    tbody tr:last-child td {
+      border-bottom-width: 0;
     }
   }
 }
 
-.table.has-sticky-column {
-
-  border-collapse: separate;
-
-  th,
-  td {
-    border-bottom-width: 0;
-
-    &:not(:last-child) {
-      border-right-width: 0;
+.table.has-sticky-header {
+  thead th {
+    @if $table-head-background-color == 'transparent' or $table-head-background-color == rgba(0, 0, 0, 0) {
+      background-color: $table-background-color;
     }
 
-    tbody tr:first-child & {
-      border-top-width: 0;
-    }
+    position: sticky;
+    top: 0;
+    z-index: 1;
   }
+}
+
+.table.has-sticky-column {
 
   thead th:first-child {
     @if $table-head-background-color == 'transparent' or $table-head-background-color == rgba(0, 0, 0, 0) {
@@ -64,13 +61,6 @@
     z-index: 1;
   }
 
-  &.is-bordered {
-    thead th:first-child,
-    tbody th:first-child {
-      border-right: 1px solid $border;
-    }
-  }
-
   &.is-hoverable {
     tbody tr:not(.is-selected):hover th:first-child {
       background-color: $table-row-hover-background-color;

diff --git a/bulma-with-sticky-table.min.css b/bulma-with-sticky-table.min.css
diff --git a/index.html b/index.html
@@ -23,7 +23,7 @@ <h1 class="title">
   <section class="section">
     <div class="container">
       <h2 class="title">
-        Example Table with all Bulma Options and a Sticky Header and First Column
+        Example Table
       </h2>
       <div class="message is-warning">
         <p class="message-body">
@@ -52,11 +52,20 @@ <h2 class="title">
           &lt;/table&gt;
         </code>
       </div>
-      <div class="buttons">
-        <button class="button is-info is-toggle-header-button" data-table="4" type="button">Toggle .has-sticky-header</button>
-        <button class="button is-info is-toggle-column-button" data-table="4" type="button">Toggle .has-sticky-column</button>
+      <div class="box">
+        <h3 class="title is-4">Table Class Toggles</h3>
+        <div class="buttons">
+          <button class="button is-info toggle-button" data-toggle-class="has-sticky-header" type="button">.has-sticky-header</button>
+          <button class="button is-info toggle-button" data-toggle-class="has-sticky-column" type="button">.has-sticky-column</button>
+        </div>
+        <div class="buttons">
+          <button class="button is-info is-small toggle-button" data-toggle-class="is-bordered" type="button">.is-bordered</button>
+          <button class="button is-info is-small toggle-button" data-toggle-class="is-striped" type="button">.is-striped</button>
+          <button class="button is-info is-small toggle-button" data-toggle-class="is-narrow" type="button">.is-narrow</button>
+          <button class="button is-info is-small toggle-button" data-toggle-class="is-hoverable" type="button">.is-hoverable</button>
+        </div>
       </div>
-      <table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth has-sticky-header has-sticky-column" id="table--4">
+      <table class="table is-striped is-bordered is-narrow is-hoverable is-fullwidth has-sticky-header has-sticky-column" id="demo-table">
         <thead>
           <tr>
             <th>Letter</th>
@@ -326,26 +335,15 @@ <h2 class="title">
     </div>
   </footer>
   <script>
-    const toggleHeaderFn = (clickEvent) => {
-      const tableID = clickEvent.currentTarget.dataset.table;
-      document.getElementById("table--" + tableID).classList.toggle("has-sticky-header");
-      clickEvent.currentTarget.classList.toggle("is-info");
-    };
-
-    const toggleColumnFn = (clickEvent) => {
-      const tableID = clickEvent.currentTarget.dataset.table;
-      document.getElementById("table--" + tableID).classList.toggle("has-sticky-column");
-      clickEvent.currentTarget.classList.toggle("is-info");
+    const toggleClassFn = (clickEvent) => {
+      const buttonElement = clickEvent.currentTarget;
+      document.getElementById("demo-table").classList.toggle(buttonElement.dataset.toggleClass);
+      buttonElement.classList.toggle("is-info");
     };
 
-    const toggleHeaderBtns = document.getElementsByClassName("is-toggle-header-button");
-    for (let index = 0; index < toggleHeaderBtns.length; index += 1) {
-      toggleHeaderBtns[index].addEventListener("click", toggleHeaderFn);
-    }
-
-    const toggleColumnBtns = document.getElementsByClassName("is-toggle-column-button");
-    for (let index = 0; index < toggleColumnBtns.length; index += 1) {
-      toggleColumnBtns[index].addEventListener("click", toggleColumnFn);
+    const toggleButtons = document.getElementsByClassName("toggle-button");
+    for (let index = 0; index < toggleButtons.length; index += 1) {
+      toggleButtons[index].addEventListener("click", toggleClassFn);
     }
   </script>
   </body>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cityssm/bulma-sticky-table",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "A Bulma-friendly way to stick a table header, first column, or both!",
   "main": "_sticky-table.scss",
   "scripts": {