fix: table CSS customization

transpara · Apr 12, 2024 · 001d695 · 001d695
1 parent b5d4aa0
commit 001d695
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 50 deletions.
diff --git a/visual-kpi-docs/src/components/Table/JsonToTable.jsx b/visual-kpi-docs/src/components/Table/JsonToTable.jsx
@@ -75,7 +75,7 @@ const JsonToTable = ({ jsonData }) => {
 
   // Table header for sorting
   const headers = Object.keys(jsonData[0]).map((key) => (
-    <th key={key} onClick={() => handleSort(key)} style={{ width: `${100 / Object.keys(jsonData[0]).length}%` }}>
+    <th key={key} onClick={() => handleSort(key)} style={{ width: `${105 / Object.keys(jsonData[0]).length}%` }}>
       {key}
       {sortColumn === key && (
         <span>{sortOrder === 'asc' ? ' 🠽' : ' 🠿'}</span>

diff --git a/visual-kpi-docs/src/css/custom.css b/visual-kpi-docs/src/css/custom.css
@@ -185,39 +185,3 @@
 .python-interface-logo {
   cursor: pointer !important;
 }
-
-/*-------------------------------- Tables configuration ------------------------------  */
-
-table {
-  width: fit-content;
-  margin: auto;
-  margin-bottom: var(--ifm-spacing-vertical);
-}
-
-table thead th {
-  background-color: #ddd7e9;
-  border: none;
-  text-align: left;
-}
-
-table tr {
-  width: 100%;
-}
-
-table tr td {
-  background-color: #ffffff;
-  border: none;
-}
-
-table thead,
-table tbody {
-  border: 1px solid #ddd7e9;
-}
-
-table thead tr {
-  border: 0 !important;
-}
-
-table {
-  font-size: small;
-}
diff --git a/visual-kpi-docs/src/css/table.css b/visual-kpi-docs/src/css/table.css
@@ -104,18 +104,16 @@
 table {
   width: 100% !important;
   margin-bottom: var(--ifm-spacing-vertical);
-  border-radius: 7px 7px 0 0;
-  table-layout: fixed;
+  border-radius: 7px !important;
+  display: table;
 }
 
 table thead, table tbody {
-  width: auto !important;
-  border: 1px solid #ddd7e9;
-  padding: 0 auto;
+  width: 100% !important;
 }
 
 table thead th {
-  border: none;
+  border: 1px solid #690;
   text-align: left;
   background: #690 !important;
   color: #fff;
@@ -128,14 +126,8 @@ table thead th {
   width: 50%;
 }
 
-table tr {
-  width: 100%;
-  align-items: flex-start;
-}
-
 table tr td {
   background-color: #ffffff;
-  border: 1px solid #e7eaee;
   color: #8e8e8e;
   font-feature-settings: 'clig' off, 'liga' off;
   font-family: Raleway;
@@ -145,7 +137,7 @@ table tr td {
   line-height: 18px;
   padding: 20px;
   text-align: start;
-  vertical-align: top;
+  /* vertical-align: top; */
 }
 
 table thead tr {