[mod] Style

src/assets/style.css

@@ -1,37 +1,64 @@
 .main {
     width: 80%;
     margin: 20px auto;
-  }
-  table {
-    border-spacing: 0;
-    width: 100%;
-  }
-  tr {
-    text-align: center;
-  }
-  th {
-    padding: 10px;
-  }
-  table tbody tr:nth-child(odd){
-    background-color: #eee
-  }
-  table thead {
-    background-color: blue;
-    color: white;
-  }
-  table thead th:first-child {
-    border-radius: 5px 0 0 0;
-    border: 1px solid blue;
-  }
-  table thead th:last-child {
-    border-radius: 0 5px 0 0;
-    border-right: 1px solid blue;
-  }
-  table tbody tr:last-child td:first-child {
-    border-radius: 0 0 0 5px;
-  }
-  
-  table tbody tr:last-child td:last-child {
-    border-radius: 0 0 5px 0;
-  }
-  
+}
+
+.table {
+    table-layout: fixed;
+    /* width: 100%; */
+    margin-bottom: 1rem;
+    color: #888;
+    vertical-align: top;
+    border-color: rgba(0, 0, 0, .05);
+}
+
+td {
+    white-space: nowrap;
+}
+
+table {
+    caption-side: bottom;
+    border-collapse: collapse;
+}
+
+.table>tbody {
+    vertical-align: inherit;
+}
+
+.table-info {
+    --bs-table-bg: #6cc3d5;
+    --bs-table-striped-bg: #73c6d7;
+    --bs-table-striped-color: #fff;
+    --bs-table-active-bg: #7bc9d9;
+    --bs-table-active-color: #fff;
+    --bs-table-hover-bg: #77c8d8;
+    --bs-table-hover-color: #fff;
+    color: #fff;
+    border-color: #7bc9d9;
+}
+
+.table>:not(caption)>*>* {
+    padding: .5rem .5rem;
+    background-color: var(--bs-table-bg);
+    border-bottom-width: 1px;
+    box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
+}
+
+tbody,
+td,
+tfoot,
+th,
+thead,
+tr {
+    border-color: inherit;
+    border-style: solid;
+    border-width: 0;
+}
+
+.table>thead {
+    vertical-align: bottom;
+}
+
+.table>:not(:first-child) {
+    border-top: 2px solid currentColor;
+}