diff --git a/common/changes/@visactor/vtable/fix-shrink-sparkline_2024-07-02-03-47.json b/common/changes/@visactor/vtable/fix-shrink-sparkline_2024-07-02-03-47.json
new file mode 100644
index 000000000..b489d3c08
--- /dev/null
+++ b/common/changes/@visactor/vtable/fix-shrink-sparkline_2024-07-02-03-47.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vtable",
+      "comment": "fix: fix width computation in shrinkSparklineFirst mode",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vtable"
+}
\ No newline at end of file
diff --git a/packages/vtable/src/scenegraph/graphic/contributions/group-contribution-render.ts b/packages/vtable/src/scenegraph/graphic/contributions/group-contribution-render.ts
index 946cbe0a5..33699feb9 100644
--- a/packages/vtable/src/scenegraph/graphic/contributions/group-contribution-render.ts
+++ b/packages/vtable/src/scenegraph/graphic/contributions/group-contribution-render.ts
@@ -269,8 +269,8 @@ export function renderStroke(
   // if (isHighlight) {
   //   context.setLineDash(highlightDash);
   // }
-  const oldLineCap = context.lineCap;
-  context.lineCap = 'square';
+  // const oldLineCap = context.lineCap;
+  // context.lineCap = 'square';
 
   const { lineDash = groupAttribute.lineDash } = group.attribute as any;
   // const lineDash = context.getLineDash();
@@ -290,8 +290,8 @@ export function renderStroke(
   // top
   if (strokeTop) {
     // context.lineTo(x + width, y);
-    const deltaLeft = strokeLeft ? 0 : (isWidthNumber ? widthInfo.width : strokeArrayWidth[3]) / 2;
-    const deltaRight = strokeRight ? 0 : (isWidthNumber ? widthInfo.width : strokeArrayWidth[1]) / 2;
+    const deltaLeft = (isWidthNumber ? widthInfo.width : strokeArrayWidth[0]) / 2;
+    const deltaRight = (isWidthNumber ? widthInfo.width : strokeArrayWidth[0]) / 2;
     if (isPart && Array.isArray(part[0])) {
       context.moveTo(x - deltaLeft + (width + deltaLeft + deltaRight) * part[0][0], y);
       context.lineTo(x - deltaLeft + (width + deltaLeft + deltaRight) * (part[0][1] - part[0][0]), y);
@@ -323,8 +323,8 @@ export function renderStroke(
   // right
   if (strokeRight) {
     // context.lineTo(x + width, y + height);
-    const deltaTop = strokeTop ? 0 : (isWidthNumber ? widthInfo.width : strokeArrayWidth[0]) / 2;
-    const deltaBottom = strokeBottom ? 0 : (isWidthNumber ? widthInfo.width : strokeArrayWidth[2]) / 2;
+    const deltaTop = (isWidthNumber ? widthInfo.width : strokeArrayWidth[1]) / 2;
+    const deltaBottom = (isWidthNumber ? widthInfo.width : strokeArrayWidth[1]) / 2;
     if (isPart && Array.isArray(part[1])) {
       context.moveTo(x + width, y - deltaTop + height * part[1][0]);
       context.lineTo(x + width, y - deltaTop + (height + deltaTop + deltaBottom) * (part[1][1] - part[1][0]));
@@ -356,8 +356,8 @@ export function renderStroke(
   // bottom
   if (strokeBottom) {
     // context.lineTo(x, y + height);
-    const deltaLeft = strokeLeft ? 0 : (isWidthNumber ? widthInfo.width : strokeArrayWidth[3]) / 2;
-    const deltaRight = strokeRight ? 0 : (isWidthNumber ? widthInfo.width : strokeArrayWidth[1]) / 2;
+    const deltaLeft = (isWidthNumber ? widthInfo.width : strokeArrayWidth[2]) / 2;
+    const deltaRight = (isWidthNumber ? widthInfo.width : strokeArrayWidth[2]) / 2;
     if (isPart && Array.isArray(part[2])) {
       context.moveTo(x - deltaLeft + (width + deltaLeft + deltaRight) * part[2][0], y + height);
       context.lineTo(x - deltaLeft + (width + deltaLeft + deltaRight) * (part[2][1] - part[2][0]), y + height);
@@ -389,8 +389,8 @@ export function renderStroke(
   // left
   if (strokeLeft) {
     // context.lineTo(x, y);
-    const deltaTop = strokeTop ? 0 : (isWidthNumber ? widthInfo.width : strokeArrayWidth[0]) / 2;
-    const deltaBottom = strokeBottom ? 0 : (isWidthNumber ? widthInfo.width : strokeArrayWidth[2]) / 2;
+    const deltaTop = (isWidthNumber ? widthInfo.width : strokeArrayWidth[3]) / 2;
+    const deltaBottom = (isWidthNumber ? widthInfo.width : strokeArrayWidth[3]) / 2;
     if (isPart && Array.isArray(part[3])) {
       context.moveTo(x, y - deltaTop + (height + deltaTop + deltaBottom) * part[3][0]);
       context.lineTo(x, y - deltaTop + (height + deltaTop + deltaBottom) * (part[3][1] - part[3][0]));
@@ -428,7 +428,7 @@ export function renderStroke(
     context.stroke();
   }
   context.lineDashOffset = 0;
-  context.lineCap = oldLineCap;
+  // context.lineCap = oldLineCap;
   context.setLineDash([]);
 }
 
diff --git a/packages/vtable/src/scenegraph/layout/compute-col-width.ts b/packages/vtable/src/scenegraph/layout/compute-col-width.ts
index a384b98ab..2b828463c 100644
--- a/packages/vtable/src/scenegraph/layout/compute-col-width.ts
+++ b/packages/vtable/src/scenegraph/layout/compute-col-width.ts
@@ -720,7 +720,7 @@ export function getAdaptiveWidth(
   if (
     table.options.customConfig?.shrinkSparklineFirst &&
     factor < 1 &&
-    totalDrawWidth - actualWidth < totalSparklineAbleWidth
+    actualWidth - totalDrawWidth < totalSparklineAbleWidth
   ) {
     // only shrink sparkline column
     for (let i = 0; i < sparklineColumns.length; i++) {