diff --git a/examples/sites/demos/pc/app/date-picker/align-composition-api.vue b/examples/sites/demos/pc/app/date-picker/align-composition-api.vue
index 391a97e588..76b3ee515e 100644
--- a/examples/sites/demos/pc/app/date-picker/align-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/align-composition-api.vue
@@ -31,6 +31,6 @@ const value = ref('')
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 350px;
+  width: 280px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/date-picker/align.vue b/examples/sites/demos/pc/app/date-picker/align.vue
index c7d0095ed0..b031f52c2d 100644
--- a/examples/sites/demos/pc/app/date-picker/align.vue
+++ b/examples/sites/demos/pc/app/date-picker/align.vue
@@ -39,6 +39,6 @@ export default {
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 350px;
+  width: 280px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/date-picker/date-range-composition-api.vue b/examples/sites/demos/pc/app/date-picker/date-range-composition-api.vue
index 17f2dcbf86..d3fe5b7fe4 100644
--- a/examples/sites/demos/pc/app/date-picker/date-range-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/date-range-composition-api.vue
@@ -39,6 +39,7 @@ const yearValue = ref('')
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
+  width: 360px;
   & > * {
     margin-top: 12px;
   }
diff --git a/examples/sites/demos/pc/app/date-picker/date-range.vue b/examples/sites/demos/pc/app/date-picker/date-range.vue
index 549bd05593..2bd3dc075c 100644
--- a/examples/sites/demos/pc/app/date-picker/date-range.vue
+++ b/examples/sites/demos/pc/app/date-picker/date-range.vue
@@ -47,6 +47,7 @@ export default {
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
+  width: 360px;
   & > * {
     margin-top: 12px;
   }
diff --git a/examples/sites/demos/pc/app/date-picker/events-composition-api.vue b/examples/sites/demos/pc/app/date-picker/events-composition-api.vue
index 59670e5873..341b905d1f 100644
--- a/examples/sites/demos/pc/app/date-picker/events-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/events-composition-api.vue
@@ -15,7 +15,7 @@
       </tiny-col>
     </tiny-row>
     <tiny-row>
-      <tiny-col :span="12">
+      <tiny-col :span="6">
         <label class="demo-date-picker-label">onPick:</label>
         <tiny-date-picker v-model="valueOnPick" type="daterange" :picker-options="pickerOptions"></tiny-date-picker>
       </tiny-col>
diff --git a/examples/sites/demos/pc/app/date-picker/events.vue b/examples/sites/demos/pc/app/date-picker/events.vue
index 68932d435e..b009573cb5 100644
--- a/examples/sites/demos/pc/app/date-picker/events.vue
+++ b/examples/sites/demos/pc/app/date-picker/events.vue
@@ -15,7 +15,7 @@
       </tiny-col>
     </tiny-row>
     <tiny-row>
-      <tiny-col :span="12">
+      <tiny-col :span="6">
         <label class="demo-date-picker-label">onPick:</label>
         <tiny-date-picker v-model="valueOnPick" type="daterange" :picker-options="pickerOptions"></tiny-date-picker>
       </tiny-col>
diff --git a/examples/sites/demos/pc/app/date-picker/now-composition-api.vue b/examples/sites/demos/pc/app/date-picker/now-composition-api.vue
index 155489b621..50c971cdfe 100644
--- a/examples/sites/demos/pc/app/date-picker/now-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/now-composition-api.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div style="width: 400px">
+    <div class="demo-date-picker">
       <div class="title">插槽式：</div>
       <tiny-date-picker v-model="value1" type="datetime">
         <template #now>
@@ -9,7 +9,7 @@
       </tiny-date-picker>
     </div>
 
-    <div style="width: 400px">
+    <div class="demo-date-picker">
       <div class="title">函数式：</div>
       <tiny-date-picker v-model="value2" type="datetime" :now-click="nowClick"> </tiny-date-picker>
     </div>
@@ -37,6 +37,9 @@ const now = () => {
 </script>
 
 <style scoped>
+.demo-date-picker {
+  width: 280px;
+}
 .nowclass {
   display: inline-flex;
   height: 28px;
diff --git a/examples/sites/demos/pc/app/date-picker/now.vue b/examples/sites/demos/pc/app/date-picker/now.vue
index 04c9c9571e..3a7297a462 100644
--- a/examples/sites/demos/pc/app/date-picker/now.vue
+++ b/examples/sites/demos/pc/app/date-picker/now.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div style="width: 400px">
+    <div class="demo-date-picker">
       <div class="title">插槽式：</div>
       <tiny-date-picker v-model="value1" type="datetime">
         <template #now>
@@ -9,7 +9,7 @@
       </tiny-date-picker>
     </div>
 
-    <div style="width: 400px">
+    <div class="demo-date-picker">
       <div class="title">函数式：</div>
       <tiny-date-picker v-model="value2" type="datetime" :now-click="nowClick"> </tiny-date-picker>
     </div>
@@ -45,6 +45,9 @@ export default {
 </script>
 
 <style scoped>
+.demo-date-picker {
+  width: 280px;
+}
 .nowclass {
   display: inline-flex;
   height: 28px;
diff --git a/examples/sites/demos/pc/app/date-picker/timezone-composition-api.vue b/examples/sites/demos/pc/app/date-picker/timezone-composition-api.vue
index 7cfc7d3fa3..90aae215fd 100644
--- a/examples/sites/demos/pc/app/date-picker/timezone-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/timezone-composition-api.vue
@@ -42,3 +42,9 @@ function selectChange(tz) {
   Modal.message({ message: `当前值为 ${tz.tz.name}`, status: 'info' })
 }
 </script>
+
+<style scoped>
+.demo-date-picker-wrap {
+  width: 280px;
+}
+</style>
diff --git a/packages/theme/src/date-table/index.less b/packages/theme/src/date-table/index.less
index 73163b53ec..d5e4ac1f3e 100644
--- a/packages/theme/src/date-table/index.less
+++ b/packages/theme/src/date-table/index.less
@@ -228,7 +228,6 @@
       div {
         margin-left: 4px;
         margin-right: 4px;
-        background-color: var(--tv-DateTable-td-bg-color-range-selected);
       }
 
       span {
@@ -242,6 +241,9 @@
         background-color: var(--tv-DateTable-bg-color-current-select);
       }
     }
+    &.selected.in-range div{
+      background-color: var(--tv-DateTable-td-bg-color-range-selected);
+    }
 
     &.week {
       font-size: 80%;