✨ colgroup

package.json

@@ -1,7 +1,7 @@
 {
   "name": "nanarinostyl",
   "description": "style lib",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "main": "./dist/index.css",
   "scripts": {
     "dev": "astro dev --host",

src/lib/components/table.styl

@@ -67,4 +67,6 @@ gray-cell()
                 gray-cell()
         th
             gray-cell()
-
+
+        colgroup>col
+            border 1px none _rgb(var(--box-shadow-color) \/ .3)

src/pages/menu/typography/table.mdx

@@ -16,6 +16,13 @@ markdown中可以使用的表格
 
 <T class="☘-table-wrapper">
     <T tag="table" class="☘-table sm">
+        <colgroup>
+            <col />
+            <col style="border-left-style:solid" />
+            <col />
+            <col style="border-left-style:solid" />
+            <col />
+        </colgroup>
         <tr style="--text-align-cell: center">
             <th> </th>
             <th colspan="2"> abc at concert pitch </th>
@@ -97,19 +104,25 @@ markdown中可以使用的表格
 ```pug
 .☘-table-wrapper
     table.☘-table
+        colgroup
+            col
+            col(span="2" style="border-left-style:solid")
         thead
             tr
-                th ...
+                th Instrument
+                th(colspan="2") abc at concert pitch
         tbody
             tr
-                td ...
-        tfoot
-            tr
-                td ...
+                td double bass
+                td instrument=C/c
+                td score=C
+        tfoot ...
 ```
 
 ## `<div>`
 
+`<colgroup>` 不再有效
+
 <KeySignatures />
 
 ```pug
@@ -145,6 +158,8 @@ markdown中可以使用的表格
 td:first-child
     position: sticky
     left: 0
-    box-shadow: var(--box-shadow-divider-right) var(--box-shadow-divider-bottom)
+    // 覆盖行的hover效果
     background-color: rgb(var(--white))
+    // 也可以通过 `<colgroup>` 设置右边框
+    box-shadow: var(--box-shadow-divider-right) var(--box-shadow-divider-bottom)
 ```