#ICZHXX 左侧的table表头和列内容没有对齐

demo/HtmlContent.vue

@@ -1,20 +1,15 @@
 <script setup lang="ts">
-import { computed } from 'vue'
 import type { Task } from '../src/models/Task'
 
 interface Props {
   task: Task,
   type: 'task-row' | 'task-bar'
 }
-
 const props = withDefaults(defineProps<Props>(), {
   color: '#409eff',
   progress: 0,
 })
-console.error("props", props)
-function handleButtonClick() {
-  alert('hello')
-}
+// console.error('props', props)
 </script>
 
 <template>

src/components/TaskList.vue

@@ -423,6 +423,7 @@ onUnmounted(() => {
 
 <style scoped>
 @import '../styles/theme-variables.css';
+@import '../styles/list.css';
 
 .task-list {
   width: 100%;
@@ -455,17 +456,6 @@ onUnmounted(() => {
   z-index: 10; /* 确保在滚动时保持在最上层 */
 }
 
-.col {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  border-right: 1px solid var(--gantt-border-light);
-  box-sizing: border-box;
-  overflow: hidden;
-  font-weight: 400;
-}
-
 .task-list-header .col {
   justify-content: center;
   font-weight: 700;
@@ -474,41 +464,6 @@ onUnmounted(() => {
   border-right-color: var(--gantt-border-medium);
 }
 
-.col:last-child {
-  border-right: none;
-}
-
-.col-name {
-  flex: 2 0 300px;
-  min-width: 300px;
-  justify-content: flex-start;
-}
-
-.col-pre {
-  flex: 1 0 120px;
-  min-width: 120px;
-}
-
-.col-assignee {
-  flex: 1 0 120px;
-  min-width: 120px;
-}
-
-.col-date {
-  flex: 1.2 0 140px;
-  min-width: 140px;
-}
-
-.col-hours {
-  flex: 1 0 100px;
-  min-width: 100px;
-}
-
-.col-progress {
-  flex: 1 0 100px;
-  min-width: 100px;
-}
-
 .task-list-body {
   width: max-content;
   background: var(--gantt-bg-primary);

src/components/TaskRow.vue

@@ -460,6 +460,7 @@ onUnmounted(() => {
 
 <style scoped>
 @import '../styles/theme-variables.css';
+@import '../styles/list.css';
 
 .task-row {
   display: flex;
@@ -611,51 +612,6 @@ onUnmounted(() => {
   margin-right: 4px;
 }
 
-.col {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  border-right: 1px solid var(--gantt-border-light);
-  box-sizing: border-box;
-  overflow: hidden;
-}
-
-.col:last-child {
-  border-right: none;
-}
-
-.col-name {
-  flex: 2 0 300px;
-  min-width: 300px;
-  justify-content: flex-start;
-}
-
-.col-pre {
-  flex: 1 0 120px;
-  min-width: 120px;
-}
-
-.col-assignee {
-  flex: 1 0 120px;
-  min-width: 120px;
-}
-
-.col-date {
-  flex: 1.2 0 140px;
-  min-width: 140px;
-}
-
-.col-hours {
-  flex: 1 0 100px;
-  min-width: 100px;
-}
-
-.col-progress {
-  flex: 1 0 100px;
-  min-width: 100px;
-}
-
 .task-name-text {
   display: inline-block;
   max-width: calc(100% - 24px);

src/styles/list.css

@@ -0,0 +1,56 @@
+@import './theme-variables.css';
+
+.col {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  border-right: 1px solid var(--gantt-border-light);
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.col:last-child {
+  border-right: none;
+}
+
+.col-name {
+  flex: 2 0 300px;
+  min-width: 300px;
+  max-width: 300px;
+  justify-content: flex-start;
+}
+
+.col-pre {
+  flex: 1 0 120px;
+  min-width: 120px;
+  max-width: 120px;
+}
+
+.col-assignee {
+  flex: 1 0 120px;
+  min-width: 120px;
+  max-width: 120px;
+}
+
+.col-date {
+  flex: 1.2 0 140px;
+  min-width: 140px;
+  max-width: 140px;
+}
+
+.col-hours {
+  flex: 1 0 100px;
+  min-width: 100px;
+  max-width: 100px;
+}
+
+.col-progress {
+  flex: 1 0 100px;
+  min-width: 100px;
+  max-width: 100px;
+}
+
+.col:last-child {
+  border-right: none;
+}