[mod] Style

src/assets/style.css

@@ -2,36 +2,63 @@
     width: 80%;
     margin: 20px auto;
 }
+
+.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 {
-    border-spacing: 0;
+    caption-side: bottom;
-    width: 100%;
+    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 {
-    text-align: center;
+    border-color: inherit;
-  }
+    border-style: solid;
-  th {
+    border-width: 0;
-    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 {
+.table>thead {
-    border-radius: 0 0 5px 0;
+    vertical-align: bottom;
 }
 
+.table>:not(:first-child) {
+    border-top: 2px solid currentColor;
+}

src/components/BJ_Casino_Rank.vue

@@ -3,6 +3,7 @@ import { ref } from "vue";
 import '../assets/style.css';
 import { BJ_Casino_Rank } from "../script/BJ_Casino_Rank";
 
+let Title = ref("BJ_Casino_Rank");
 let div_Main = ref(null);
 const self = {
     div_Main: div_Main
@@ -11,5 +12,6 @@ const Script = new BJ_Casino_Rank(self);
 </script>
 
 <template>
+    <h1>{{ Title }}</h1>
     <div ref="div_Main"></div>
 </template>

src/script/BJ_Casino_Rank.ts

@@ -123,7 +123,7 @@ export class BJ_Casino_Rank {
         let div_Main = this._client.div_Main;
         let div_main_s = "";
         div_main_s += `
-        <table>
+        <table class="table table-striped table-info table-hover">
         <thead>
         `;
         div_main_s += `<th>排名</th>`;
@@ -131,7 +131,7 @@ export class BJ_Casino_Rank {
         div_main_s += `<th>倍率</th>`;
         div_main_s += `<th>機台</th>`;
         div_main_s += `<th>桌號</th>`;
-        div_main_s += `</thead>`;
+        div_main_s += `</thead><tbody>`;
         for (let i = 0; i < rankdata.length; i++) {
             const data = rankdata[i];
             const rank = data[0];
@@ -140,18 +140,16 @@ export class BJ_Casino_Rank {
             const slot = data[3][0];
             const table = data[3][1];
             div_main_s += `
-                    <tbody>
                     <tr>
                     <td><font size="5"><b>${rank}</b></font></td>
-                    <td><font size="5"><b>${name}</b></font></td>
+                    <td align="left"><font size="5"><b>${name}</b></font></td>
-                    <td><font size="5"><b>${magnification}</b></font></td>
+                    <td align="left"><font size="5"><b>${magnification}</b></font></td>
-                    <td><font size="5"><b>${slot}</b></font></td>
+                    <td align="left"><font size="5"><b>${slot}</b></font></td>
-                    <td><font size="5"><b>${table}</b></font></td>
+                    <td align="left"><font size="5"><b>${table}</b></font></td>
-                    <tr>
+                    </tr>
-                    </tbody>
                     `;
         }
-        div_main_s += `</table>`;
+        div_main_s += `</tbody></table>`;
         div_Main.value.innerHTML = div_main_s;
     }