style: refs #8604 fix style

src/components/VnTable/VnTable.vue

@@ -629,6 +629,7 @@ const checkbox = ref(null);
                 <template #header-cell="{ col }">
                     <QTh
                         v-if="col.visible ?? true"
+                        v-bind:class="col.headerClass"
                         class="body-cell"
                         :style="col?.width ? `max-width: ${col?.width}` : ''"
                         style="padding: inherit"

src/pages/Ticket/TicketFuture.vue

@@ -56,7 +56,7 @@ const ticketColumns = computed(() => [
         headerClass: 'horizontal-separator',
     },
     {
-        align: 'left',
+        align: 'center',
         label: t('advanceTickets.ipt'),
         name: 'ipt',
         columnFilter: {
@@ -106,7 +106,7 @@ const ticketColumns = computed(() => [
         label: t('advanceTickets.futureId'),
         name: 'futureId',
         align: 'center',
-        headerClass: 'vertical-separator horizontal-separator',
+        headerClass: 'horizontal-separator vertical-separator ',
         columnClass: 'vertical-separator',
     },
     {
@@ -118,7 +118,7 @@ const ticketColumns = computed(() => [
         format: (row) => toDateTimeFormat(row.futureShipped),
     },
     {
-        align: 'left',
+        align: 'center',
         label: t('advanceTickets.futureIpt'),
         name: 'futureIpt',
         columnFilter: {
@@ -250,6 +250,7 @@ watch(
     </RightMenu>
     <QPage class="column items-center q-pa-md">
         <VnTable
+            class="bg-header q-pr-xs"
             data-key="futureTickets"
             ref="vnTableRef"
             url="Tickets/getTicketsFuture"
@@ -437,4 +438,7 @@ watch(
 :deep(.horizontal-separator) {
     border-top: 4px solid white !important;
 }
+:deep(.horizontal-bottom-separator) {
+    border-bottom: 4px solid white !important;
+}
 </style>