diff --git a/assets/stylesheets/template/modules/announcement.scss b/assets/stylesheets/template/modules/announcement.scss
index 28eab13..1ddd7ba 100644
--- a/assets/stylesheets/template/modules/announcement.scss
+++ b/assets/stylesheets/template/modules/announcement.scss
@@ -2369,10 +2369,7 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl
   }
 
   .s-annc__flie-title {
-    max-width: 9.375rem;
-    overflow: hidden;
     white-space: nowrap;
-    text-overflow: ellipsis;
   }
 
   .s-annc__social > * {
diff --git a/assets/stylesheets/template/modules/universal-table.scss b/assets/stylesheets/template/modules/universal-table.scss
index 6e91e51..bd3198f 100644
--- a/assets/stylesheets/template/modules/universal-table.scss
+++ b/assets/stylesheets/template/modules/universal-table.scss
@@ -74,10 +74,11 @@
   cursor: pointer;
   padding: 0;
   position: absolute;
-  right: 1em;
+  right:1em;
   z-index: 99;
   @media(max-width: $screen-xs){
     margin-top: 0.5em;
+    right:0;
   }
   .searchbtn2, .universal-btn {
     line-height: 2em;
@@ -203,3 +204,60 @@
   -o-transition: .3s all ease;
   transition: .3s all ease;
 }
+.universal-table-index.table td{
+      padding: 15px 10px!important;
+}
+.universal-table-index1{
+  .col-ken{
+    @media(min-width: $screen-xs){
+              width: auto!important;
+    }
+
+  }
+  @media(min-width: $screen-xs){
+    .universal-th-icon{
+      padding:5px!important;
+    }
+    .universal-dropdown{
+      .btn{
+        padding: 0.3125em!important;
+      }
+    }
+    .universal-th-text{
+      display: block!important;
+      clear: both;
+    }
+  }
+}
+.universal-table-index3{
+  .col-ken{
+    @media(min-width: $screen-xs){
+              width: auto!important;
+    }
+
+  }
+  @media(min-width: $screen-xs){
+    .universal-th-icon{
+      padding:5px!important;
+    }
+    .universal-dropdown{
+      .btn{
+        padding: 0.3125em!important;
+      }
+    }
+    .universal-th-text{
+      display: block!important;
+      clear: both;
+    }
+  }
+}
+.universal-table-index4{
+  .universal-th-text{
+    margin: 0;
+  }
+  .col-ken{
+      @media(min-width: $screen-xs){
+        width: auto!important;
+      }
+  }
+}
diff --git a/assets/stylesheets/template/template.scss b/assets/stylesheets/template/template.scss
index 243968e..1079d5e 100644
--- a/assets/stylesheets/template/template.scss
+++ b/assets/stylesheets/template/template.scss
@@ -41,7 +41,7 @@
 // container setting
 .response-container {
   position: relative;
-  margin: auto;
+  margin:auto!important;
   @media (max-width: $screen-xs) {
     width: 100%;
   }
@@ -501,5 +501,4 @@ input.search_box{
     display: flex;
     flex-wrap: wrap-reverse!important;
   }
-
 }
diff --git a/modules/universal_table/index.html.erb b/modules/universal_table/index.html.erb
index 6df4915..acf60e8 100644
--- a/modules/universal_table/index.html.erb
+++ b/modules/universal_table/index.html.erb
@@ -1,9 +1,42 @@
 <style>
+
+  .universal-dropdown{
+    float:left;
+  }
+  tr>th:first-child{
+    display: none!important;
+  }
+  tr>td:first-child{
+    display: none!important;
+  }
+  .col-ken{
+        min-width: 4em;
+    &:first-child{
+      min-width: unset!important;
+    }
+  }
+  .universal-table-index3{
+    table-layout: auto!important;
+    .universal-th-icon{
+      margin:0;
+    }
+    .universal-th-text {
+      margin: 0;
+      .universal-th-icon{
+        margin:0;
+      }
+      .universal-th-text {
+        margin: 0;
+      }
+    }
+
+  }
   .universal-th-text{
+    white-space: pre!important;
     overflow: hidden;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  white-space: normal;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    white-space: normal;
 }
   .universal-dropdown-menu {
     padding: 15px 18px;
@@ -53,16 +86,15 @@
     width: 120px;
   }
 </style>
-<table class="table table-hover table-striped universal-table-index">
+<table class="table table-hover table-striped universal-table-index universal-table-index1">
   <caption>
     <h3>{{table-name}}</h3>
     <a href="{{url}}" class="universal-btn btn btn-info pull-right {{reset}}"><i class="fa fa-refresh"></i> Reset</a>
   </caption>
   <thead>
     <tr data-list="head-columns" data-level="0">
-      <th class="col-md-3">
+      <th class="col-ken">
         <a href="{{sort-url}}" class="{{sort}}"><i class="universal-th-icon fa fa-{{sort-class}}"></i></a>
-        <div class="universal-th-text {{title-class}}">{{title}}</div>
         <div class="dropdown universal-dropdown {{search}}">
           <button class="btn btn-sm" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             <i class="fa fa-search"></i>
@@ -78,6 +110,7 @@
             </form>
           </div>
         </div>
+                <div class="universal-th-text {{title-class}}">{{title}}</div>
       </th>
     </tr>
   </thead>
@@ -91,33 +124,7 @@
 <div>{{export_button}}</div>
 {{pagination_goes_here}}
 <script>
-// $('.universal-table-index th').eq(1).attr('class', 'desktop tablet-l tablet-p');
-// $('.universal-table-index th').filter(':gt(1)').attr('class', 'desktop tablet-l tablet-p mobile-l');
-// $('.universal-table-index').each(function(){
-//   if($(this).find('thead').length!=0 && $(this).find('td').length!=0 && !$(this).hasClass('dataTable')){
-//     $(this).DataTable({
-//       searching: false,
-//       paging: false,
-//       ordering: false,
-//       info: false,
-//       order: false,
-//       autoWidth: false,
-//       responsive: true
-//     });
-//   }
-// });
-$(document).ready(function(){
-  $("tr>th:first-child").removeClass("col-sm-3");
-  $("tr>th:first-child").addClass("col-sm-4");
-  $("tr>th:nth-child(2)").removeClass("col-sm-3");
-  $("tr>th:nth-child(2)").addClass("col-sm-2");
-  $("tr>th:nth-child(3)").removeClass("col-sm-3");
-  $("tr>th:nth-child(3)").addClass("col-sm-2");
-  $("tr>th:nth-child(4)").removeClass("col-sm-3");
-  $("tr>th:nth-child(4)").addClass("col-sm-2");
-  $("tr>th:nth-child(5)").removeClass("col-sm-3");
-  $("tr>th:nth-child(5)").addClass("col-sm-2");
-});
+
 </script>
 <style>
 .universal-table-index.dtr-inline.collapsed td.dtr-control{
diff --git a/modules/universal_table/index2.html.erb b/modules/universal_table/index2.html.erb
index fbbbd85..a2b81c7 100644
--- a/modules/universal_table/index2.html.erb
+++ b/modules/universal_table/index2.html.erb
@@ -1,4 +1,37 @@
 <style>
+
+  .universal-dropdown{
+    float:left;
+  }
+  .col-ken{
+        min-width: 4em;
+    &:first-child{
+      min-width: unset!important;
+    }
+  }
+  .universal-table-index3{
+    table-layout: auto!important;
+    .universal-th-icon{
+      margin:0;
+    }
+    .universal-th-text {
+      margin: 0;
+      .universal-th-icon{
+        margin:0;
+      }
+      .universal-th-text {
+        margin: 0;
+      }
+    }
+
+  }
+  .universal-th-text{
+    white-space: pre!important;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    white-space: normal;
+}
   .universal-dropdown-menu {
     padding: 15px 18px;
     white-space: nowrap;
@@ -32,21 +65,6 @@
     left: auto;
     right: 0;
   }
-  .universal-table-index tbody {
-     counter-reset: item;
-  }
-
-  .universal-table-index tbody > tr > td:first-child:before {
-     content: counter(item);
-     counter-increment: item;
-  }
-
-
-  .universal-table-index thead > tr > th:first-child:before {
-     content: "No.";
-  }
-
-
   .universal-th-icon {
     border: 1px solid #eee;
     padding: 5px 8px;
@@ -62,45 +80,17 @@
     width: 120px;
   }
 </style>
-<form class="form-inline universal-form-inline" action="{{url}}" method="get">
-<table class="table table-hover table-striped universal-table-index">
-  <div class="searchbtn">
-    <div class="ken-click">
-      <div class="searchbtn2 pull-right"><i class="fa-solid fa-magnifying-glass"></i>查詢</div>
-      <a href="{{url}}" class="universal-btn btn btn-info pull-right {{reset}}"><i class="fa fa-refresh"></i> Reset</a>
-    </div>
-  </div>
-  <div class="searchbox">
-  <div class="theadsearch2">
-    <div class="row col-md-11 col-xs-12" data-list="searchable-columns" data-level="0">
-      <div class="{{col-class}}">
-        <a href="{{sort-url}}" class="{{sort}}"><i class="universal-th-icon fa fa-{{sort-class}}"></i></a>
-        <div class="universal-th-text {{title-class}}">{{title}}</div>
-        <div class="dropdown universal-dropdown {{search}}">
-          <div class="dropdown-menu universal-dropdown-menu" aria-labelledby="dLabel">
-            <div class="form-group">
-              {{form-field}}
-              <input type="hidden" value="{{key}}" name="column" >
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="col-md-1 col-xs-12 submit-btn-wrap">
-      <button class="btn btn-primary pull-right" type="submit" class="btn btn-default">Go</button>
-    </div>
-  </div>
-  </div>
+<table class="table table-hover table-striped universal-table-index universal-table-index3">
   <caption>
     <h3>{{table-name}}</h3>
+    <a href="{{url}}" class="universal-btn btn btn-info pull-right {{reset}}"><i class="fa fa-refresh"></i> Reset</a>
   </caption>
-  <thead class="theadsearch">
+  <thead>
     <tr data-list="head-columns" data-level="0">
-      <th class="col-md-3">
+      <th class="col-ken">
         <a href="{{sort-url}}" class="{{sort}}"><i class="universal-th-icon fa fa-{{sort-class}}"></i></a>
-        <div class="universal-th-text {{title-class}}">{{title}}</div>
         <div class="dropdown universal-dropdown {{search}}">
-          <button class="btn btn-md" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+          <button class="btn btn-sm" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             <i class="fa fa-search"></i>
             <span class="caret"></span>
           </button>
@@ -114,6 +104,7 @@
             </form>
           </div>
         </div>
+                <div class="universal-th-text {{title-class}}">{{title}}</div>
       </th>
     </tr>
   </thead>
@@ -123,25 +114,14 @@
     </tr>
   </tbody>
 </table>
-</form>
 <div>{{total_entries}}</div>
 <div>{{export_button}}</div>
 {{pagination_goes_here}}
 <script>
-$(document).ready(function(){
-  $('.universal-table-index thead tr').prepend('<th></th>')
-  $('.universal-table-index tbody tr').prepend('<td></td>')
-  $("tr>th:first-child").removeClass("col-md-3");
-  $("tr>th:first-child").addClass("col-md-1");
-  $("tr>th:nth-child(2)").removeClass("col-md-3");
-  $("tr>th:nth-child(2)").addClass("col-md-6");
-  $("tr>th:nth-child(3)").removeClass("col-md-3");
-  $("tr>th:nth-child(3)").addClass("col-md-3");
-  $("tr>th:nth-child(4)").removeClass("col-md-3");
-  $("tr>th:nth-child(4)").addClass("col-md-2");
-  $("tr>th:nth-child(5)").removeClass("col-md-3");
-  $("tr>th:nth-child(5)").addClass("col-md-3");
-});
-// $('.universal-table-index thead tr').prepend('<th></th>')
-// $('.universal-table-index tbody tr').prepend('<td></td>')
+
 </script>
+<style>
+.universal-table-index.dtr-inline.collapsed td.dtr-control{
+  vertical-align: middle;
+}
+</style>
diff --git a/modules/universal_table/index3.html.erb b/modules/universal_table/index3.html.erb
index f7d0a77..590cff5 100644
--- a/modules/universal_table/index3.html.erb
+++ b/modules/universal_table/index3.html.erb
@@ -1,4 +1,13 @@
 <style>
+  tr>th:first-child{
+    display: none!important;
+  }
+  tr>td:first-child{
+    display: none!important;
+  }
+  .universal-table-index4{
+    table-layout: auto!important;
+  }
   .universal-dropdown-menu {
     padding: 15px 18px;
     white-space: nowrap;
@@ -50,8 +59,8 @@
     width: 120px;
   }
 </style>
-<form class="form-inline universal-form-inline" action="{{url}}" method="get">
-<table class="table table-hover table-striped universal-table-index">
+<form class="form-inline universal-form-inline " action="{{url}}" method="get">
+<table class="table table-hover table-striped universal-table-index universal-table-index4">
   <div class="searchbtn">
     <div class="ken-click">
       <div class="searchbtn2 pull-right"><i class="fa-solid fa-magnifying-glass"></i>查詢</div>
@@ -84,7 +93,7 @@
   </caption>
   <thead class="theadsearch">
     <tr data-list="head-columns" data-level="0">
-      <th class="col-md-3">
+      <th class="col-ken">
         <a href="{{sort-url}}" class="{{sort}}"><i class="universal-th-icon fa fa-{{sort-class}}"></i></a>
         <div class="universal-th-text {{title-class}}">{{title}}</div>
         <div class="dropdown universal-dropdown {{search}}">
@@ -116,18 +125,18 @@
 <div>{{export_button}}</div>
 {{pagination_goes_here}}
 <script>
-$(document).ready(function(){
-  $("tr>th:first-child").removeClass("col-md-3");
-  $("tr>th:first-child").addClass("col-md-1");
-  $("tr>th:nth-child(2)").removeClass("col-md-3");
-  $("tr>th:nth-child(2)").addClass("col-md-6");
-  $("tr>th:nth-child(3)").removeClass("col-md-3");
-  $("tr>th:nth-child(3)").addClass("col-md-3");
-  $("tr>th:nth-child(4)").removeClass("col-md-3");
-  $("tr>th:nth-child(4)").addClass("col-md-2");
-  $("tr>th:nth-child(5)").removeClass("col-md-3");
-  $("tr>th:nth-child(5)").addClass("col-md-3");
-});
+// $(document).ready(function(){
+//   $("tr>th:first-child").removeClass("col-md-3");
+//   $("tr>th:first-child").addClass("col-md-1");
+//   $("tr>th:nth-child(2)").removeClass("col-md-3");
+//   $("tr>th:nth-child(2)").addClass("col-md-6");
+//   $("tr>th:nth-child(3)").removeClass("col-md-3");
+//   $("tr>th:nth-child(3)").addClass("col-md-3");
+//   $("tr>th:nth-child(4)").removeClass("col-md-3");
+//   $("tr>th:nth-child(4)").addClass("col-md-2");
+//   $("tr>th:nth-child(5)").removeClass("col-md-3");
+//   $("tr>th:nth-child(5)").addClass("col-md-3");
+// });
 // $('.universal-table-index thead tr').prepend('<th></th>')
 // $('.universal-table-index tbody tr').prepend('<td></td>')
 </script>
diff --git a/modules/universal_table/index4.html.erb b/modules/universal_table/index4.html.erb
index f7d0a77..ee6278d 100644
--- a/modules/universal_table/index4.html.erb
+++ b/modules/universal_table/index4.html.erb
@@ -1,4 +1,7 @@
 <style>
+  .universal-table-index4{
+    table-layout: auto!important;
+  }
   .universal-dropdown-menu {
     padding: 15px 18px;
     white-space: nowrap;
@@ -50,8 +53,8 @@
     width: 120px;
   }
 </style>
-<form class="form-inline universal-form-inline" action="{{url}}" method="get">
-<table class="table table-hover table-striped universal-table-index">
+<form class="form-inline universal-form-inline " action="{{url}}" method="get">
+<table class="table table-hover table-striped universal-table-index universal-table-index4">
   <div class="searchbtn">
     <div class="ken-click">
       <div class="searchbtn2 pull-right"><i class="fa-solid fa-magnifying-glass"></i>查詢</div>
@@ -84,7 +87,7 @@
   </caption>
   <thead class="theadsearch">
     <tr data-list="head-columns" data-level="0">
-      <th class="col-md-3">
+      <th class="col-ken">
         <a href="{{sort-url}}" class="{{sort}}"><i class="universal-th-icon fa fa-{{sort-class}}"></i></a>
         <div class="universal-th-text {{title-class}}">{{title}}</div>
         <div class="dropdown universal-dropdown {{search}}">
@@ -116,18 +119,18 @@
 <div>{{export_button}}</div>
 {{pagination_goes_here}}
 <script>
-$(document).ready(function(){
-  $("tr>th:first-child").removeClass("col-md-3");
-  $("tr>th:first-child").addClass("col-md-1");
-  $("tr>th:nth-child(2)").removeClass("col-md-3");
-  $("tr>th:nth-child(2)").addClass("col-md-6");
-  $("tr>th:nth-child(3)").removeClass("col-md-3");
-  $("tr>th:nth-child(3)").addClass("col-md-3");
-  $("tr>th:nth-child(4)").removeClass("col-md-3");
-  $("tr>th:nth-child(4)").addClass("col-md-2");
-  $("tr>th:nth-child(5)").removeClass("col-md-3");
-  $("tr>th:nth-child(5)").addClass("col-md-3");
-});
+// $(document).ready(function(){
+//   $("tr>th:first-child").removeClass("col-md-3");
+//   $("tr>th:first-child").addClass("col-md-1");
+//   $("tr>th:nth-child(2)").removeClass("col-md-3");
+//   $("tr>th:nth-child(2)").addClass("col-md-6");
+//   $("tr>th:nth-child(3)").removeClass("col-md-3");
+//   $("tr>th:nth-child(3)").addClass("col-md-3");
+//   $("tr>th:nth-child(4)").removeClass("col-md-3");
+//   $("tr>th:nth-child(4)").addClass("col-md-2");
+//   $("tr>th:nth-child(5)").removeClass("col-md-3");
+//   $("tr>th:nth-child(5)").addClass("col-md-3");
+// });
 // $('.universal-table-index thead tr').prepend('<th></th>')
 // $('.universal-table-index tbody tr').prepend('<td></td>')
 </script>
diff --git a/modules/universal_table/info.json b/modules/universal_table/info.json
index 65b6842..3a6438a 100644
--- a/modules/universal_table/info.json
+++ b/modules/universal_table/info.json
@@ -12,27 +12,27 @@
             "filename" : "index2",
             "name" : {
                 "zh_tw" : "2. 含序號表格列表",
-                "en" : "2. Index Table with serial number"
-                },
-            "thumbnail" : "thumb.png"
-        },
-        {
-            "filename" : "index3",
-            "name" : {
-                "zh_tw" : "3. 含序號表格列表 + 多欄位搜尋",
-                "en" : "3. Index Table with serial number + Multiple Field Search"
+                "en" : "2. Index Table with serial number "
                 },
             "thumbnail" : "thumb.png",
             "default": true
           },
           {
-                  "filename" : "index4",
-                  "name" : {
-                      "zh_tw" : "4. 含序號表格列表new",
-                      "en" : "4. Index Table with serial number new"
-                      },
-                  "thumbnail" : "thumb.png",
-                  "default": true
-          }
+              "filename" : "index3",
+              "name" : {
+                  "zh_tw" : "3. 單純表格列表 + 多欄位搜尋",
+                  "en" : "3. col Pure index table+ Multiple Field Search"
+                  },
+              "thumbnail" : "thumb.png"
+          },
+          {
+              "filename" : "index4",
+              "name" : {
+                  "zh_tw" : "4.含序號表格列表 + 多欄位搜尋",
+                  "en" : "4. col Index Table with serial number + Multiple Field Search"
+                  },
+              "thumbnail" : "thumb.png",
+              "default": true
+            }
     ]
 }