diff --git a/src/BootstrapBlazor.Shared/Samples/Table/Tables.razor.cs b/src/BootstrapBlazor.Shared/Samples/Table/Tables.razor.cs
index 91aecaaab6c0c41dad2f3b414a7a53165a5ca8a5..4c10e68d4d127fd7912e5cf6ff8556b12bbe1bc2 100644
--- a/src/BootstrapBlazor.Shared/Samples/Table/Tables.razor.cs
+++ b/src/BootstrapBlazor.Shared/Samples/Table/Tables.razor.cs
@@ -661,6 +661,14 @@ public partial class Tables
             DefaultValue = "Popup"
         },
         new()
+        {
+            Name = nameof(Table<Foo>.CollapsedTopSearch),
+            Description = "是否收缩顶部搜索框",
+            Type = "boolean",
+            ValueList = "true / false",
+            DefaultValue = "false"
+        },
+        new()
         {
             Name = "ShowToolbar",
             Description = "显示 Toolbar",
diff --git a/src/BootstrapBlazor.Shared/Samples/Table/TablesSearch.razor b/src/BootstrapBlazor.Shared/Samples/Table/TablesSearch.razor
index 759b06b97a45cb4a5be21330949c855ed3bf1c80..43ecba2312316b6b5e4fa77e5206907113458a54 100644
--- a/src/BootstrapBlazor.Shared/Samples/Table/TablesSearch.razor
+++ b/src/BootstrapBlazor.Shared/Samples/Table/TablesSearch.razor
@@ -9,7 +9,7 @@
 </Tips>
 
 <DemoBlock Title="具有搜索功能的表格" Introduction="设置 <code>ShowSearch</code> 显示查询组件，通过设置 <code>SearchTemplate</code> 模板自定义搜索 UI" Name="SearchTable">
-    <ul class="ul-demo">
+    <ul class="ul-demo mb-3">
         <li>通过设置 <code>ShowEmpty="true"</code> 开启无数据显示功能</li>
         <li><code>EmptyText</code> 参数用于设置无数据时显示文字，默认取资源文件中的内置文字</li>
         <li><code>EmptyTemplate</code> 参数用于自定义无数据显示模板</li>
diff --git a/src/BootstrapBlazor/Components/Table/Table.razor b/src/BootstrapBlazor/Components/Table/Table.razor
index 5602234cbaf9d783b444c4fc96369dbb70321505..c479d2f2257861fd0acf4aa941a0f79e7e3e486b 100644
--- a/src/BootstrapBlazor/Components/Table/Table.razor
+++ b/src/BootstrapBlazor/Components/Table/Table.razor
@@ -798,10 +798,10 @@ RenderFragment<TItem> RenderRowExtendButtons => item =>
 </td>;
 
 RenderFragment RenderSearch =>
-@<Card>
-    <CardHeader>
+@<div class="@TopSearchClassString">
+    <div class="card-header">
         <div class="d-flex">
-            <div class="table-search-collapse is-open">
+            <div class="@TopSearchHeaderClassString">
                 <i class="table-search-collapse-arrow fa fa-chevron-circle-right"></i>
                 <div class="table-search-collapse-title">@SearchModalTitle</div>
             </div>
@@ -840,8 +840,8 @@ RenderFragment RenderSearch =>
                 }
             </div>
         </div>
-    </CardHeader>
-    <CardBody>
+    </div>
+    <div class="card-body" style="@TopSearchBodyClassString">
         @if(CustomerSearchModel != null && CustomerSearchTemplate != null)
         {
             @CustomerSearchTemplate(CustomerSearchModel)
@@ -857,6 +857,6 @@ RenderFragment RenderSearch =>
                 </EditorForm>
             </CascadingValue>
         }
-    </CardBody>
-</Card>;
+    </div>
+</div>;
 }
diff --git a/src/BootstrapBlazor/Components/Table/Table.razor.Search.cs b/src/BootstrapBlazor/Components/Table/Table.razor.Search.cs
index e0d2c97c2169d40b8cae0fc2c2fa0bfb7e382b48..b09011f0c603de447e7b2cc8ef4a41537f45f737 100644
--- a/src/BootstrapBlazor/Components/Table/Table.razor.Search.cs
+++ b/src/BootstrapBlazor/Components/Table/Table.razor.Search.cs
@@ -51,6 +51,12 @@ public partial class Table<TItem>
     [Parameter]
     public bool ShowSearch { get; set; }
 
+    /// <summary>
+    /// 获得/设置 是否收缩顶部搜索框 默认为 false 不收缩搜索框 是否显示搜索框请设置 <see cref="SearchMode"/> 值 Top
+    /// </summary>
+    [Parameter]
+    public bool CollapsedTopSearch { get; set; }
+
     /// <summary>
     /// 获得/设置 是否显示搜索框 默认为 true 显示搜索文本框  <see cref="ShowSearch" />
     /// </summary>
@@ -117,6 +123,18 @@ public partial class Table<TItem>
     [Parameter]
     public Func<TItem, Task>? OnResetSearchAsync { get; set; }
 
+    private string? TopSearchClassString => CssBuilder.Default("card")
+        .AddClass("collapsed", CollapsedTopSearch)
+        .Build();
+
+    private string? TopSearchHeaderClassString => CssBuilder.Default("table-search-collapse")
+        .AddClass("is-open", !CollapsedTopSearch)
+        .Build();
+
+    private string? TopSearchBodyClassString => CssBuilder.Default()
+        .AddClass("display: none;", CollapsedTopSearch)
+        .Build();
+
     /// <summary>
     /// 重置查询方法
     /// </summary>