diff --git a/CHANGES.md b/CHANGES.md
index 3029a1fa0c4..dd8bd9258e9 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -9,7 +9,8 @@ Apollo 2.3.0
 * [Add comment for clusters and UI display](https://github.com/apolloconfig/apollo/pull/5072)
 * [Fix the issue that the length of private namespaces are mis-calculated](https://github.com/apolloconfig/apollo/pull/5078)
 * [apollo assembly optimization](https://github.com/apolloconfig/apollo/pull/5035)
+* [update the config item table column width](https://github.com/apolloconfig/apollo/pull/5131)
 
 
 ------------------
-All issues and pull requests are [here](https://github.com/apolloconfig/apollo/milestone/14?closed=1)
\ No newline at end of file
+All issues and pull requests are [here](https://github.com/apolloconfig/apollo/milestone/14?closed=1)
diff --git a/apollo-portal/src/main/resources/static/views/component/namespace-panel-branch-tab.html b/apollo-portal/src/main/resources/static/views/component/namespace-panel-branch-tab.html
index 6b461d9c612..2b091a08293 100644
--- a/apollo-portal/src/main/resources/static/views/component/namespace-panel-branch-tab.html
+++ b/apollo-portal/src/main/resources/static/views/component/namespace-panel-branch-tab.html
@@ -161,7 +161,7 @@
 
                             <tr ng-repeat="config in namespace.branch.branchItems |orderBy:col:desc"
                                 ng-if="config.item.key">
-                                <td width="7%" class="text-center">
+                                <td width="8%" class="text-center">
                                     <span class="label label-warning no-radius cursor-pointer" data-tooltip="tooltip"
                                         data-placement="bottom"
                                         title="{{'Component.Namespace.Branch.Body.ClickToSeeItemValue' | translate }}"
@@ -188,7 +188,7 @@
                                         data-placement="bottom"
                                         title="{{'Component.Namespace.Branch.Body.AddedByGrayscale' | translate }}">{{'Component.Namespace.Branch.Body.Added' | translate }}</span>
                                 </td>
-                                <td width="7%" class="text-center">
+                                <td width="6%" class="text-center">
                                     <span ng-if="config.item.type == '0'"
                                     >{{'Component.ConfigItem.ItemTypeString' | translate }}</span>
                                     <span ng-if="config.item.type == '1'"
@@ -214,13 +214,14 @@
                                     <span ng-bind="config.item.comment | limitTo: 250"></span>
                                     <span ng-bind="config.item.comment.length > 250 ?'...' : ''"></span>
                                 </td>
-                                <td width="7%" ng-bind="config.item.dataChangeLastModifiedByDisplayName + '(' + config.item.dataChangeLastModifiedBy + ')'">
+                                <td width="10%" class="text-center"
+                                    ng-bind="config.item.dataChangeLastModifiedByDisplayName + '(' + config.item.dataChangeLastModifiedBy + ')'">
                                 </td>
-                                <td width="10%"
+                                <td width="10%" class="text-center"
                                     ng-bind="config.item.dataChangeLastModifiedTime | date: 'yyyy-MM-dd HH:mm:ss'">
                                 </td>
 
-                                <td width="9%" class="text-center">
+                                <td width="6%" class="text-center">
                                     <img src="img/edit.png" data-tooltip="tooltip" data-placement="bottom"
                                         title="{{'Component.Namespace.Branch.Body.Op.Modify' | translate }}"
                                         ng-if="!config.isDeleted" ng-click="editItem(namespace.branch, config.item)"
@@ -293,7 +294,7 @@
                                         title="{{'Component.Namespace.MasterBranch.Body.ItemEffective' | translate }}"
                                         ng-if="!config.isModified">{{'Component.Namespace.MasterBranch.Body.ItemPublished' | translate }}</span>
                                 </td>
-                                <td width="10%" class="cursor-pointer"
+                                <td width="20%" class="cursor-pointer"
                                     title="{{'Component.Namespace.Branch.Body.ClickToSee' | translate }}"
                                     ng-click="showText(config.item.key)">
                                     <span ng-bind="config.item.key | limitTo: 250"></span>
@@ -309,7 +310,7 @@
                                         data-placement="bottom"
                                         title="{{'Component.Namespace.Branch.Body.DeletedItem' | translate }}">{{'Component.Namespace.Branch.Body.Delete' | translate }}</span>
                                 </td>
-                                <td width="7%" class="text-center">
+                                <td width="6%" class="text-center">
                                     <span ng-if="config.item.type == '0'"
                                     >{{'Component.ConfigItem.ItemTypeString' | translate }}</span>
                                     <span ng-if="config.item.type == '1'"
@@ -319,23 +320,24 @@
                                     <span ng-if="config.item.type == '3'"
                                     >{{'Component.ConfigItem.ItemTypeJson' | translate }}</span>
                                 </td>
-                                <td width="33%" class="cursor-pointer"
+                                <td width="25%" class="cursor-pointer"
                                     title="{{'Component.Namespace.Branch.Body.ClickToSee' | translate }}"
                                     ng-click="showText(config.item.value)">
                                     <span ng-bind="config.item.value | limitTo: 250"></span>
                                     <span ng-bind="config.item.value.length > 250 ? '...': ''"></span>
                                 </td>
-                                <td width="12%" title="{{config.item.comment}}">
+                                <td width="15%" title="{{config.item.comment}}">
                                     <span ng-bind="config.item.comment | limitTo: 250"></span>
                                     <span ng-bind="config.item.comment.length > 250 ?'...' : ''"></span>
                                 </td>
-                                <td width="10%" ng-bind="config.item.dataChangeLastModifiedByDisplayName + '(' + config.item.dataChangeLastModifiedBy + ')'">
+                                <td width="10%" class="text-center"
+                                    ng-bind="config.item.dataChangeLastModifiedByDisplayName + '(' + config.item.dataChangeLastModifiedBy + ')'">
                                 </td>
-                                <td width="15%"
+                                <td width="10%" class="text-center"
                                     ng-bind="config.item.dataChangeLastModifiedTime | date: 'yyyy-MM-dd HH:mm:ss'">
                                 </td>
 
-                                <td width="5%" class="text-center">
+                                <td width="6%" class="text-center">
                                     <img src="img/gray.png" data-tooltip="tooltip" data-placement="bottom"
                                         title="{{'Component.Namespace.MasterBranch.Body.ModifyItem' | translate }}"
                                         ng-if="!config.isDeleted" ng-click="editItem(namespace.branch, config.item)"
@@ -653,4 +655,4 @@ <h3 class="media-heading" ng-bind="commits.dataChangeCreatedByDisplayName + '('
             </div>
         </section>
     </div>
-</section>
\ No newline at end of file
+</section>
diff --git a/apollo-portal/src/main/resources/static/views/component/namespace-panel-master-tab.html b/apollo-portal/src/main/resources/static/views/component/namespace-panel-master-tab.html
index 68949683471..6b8fa17f47d 100644
--- a/apollo-portal/src/main/resources/static/views/component/namespace-panel-master-tab.html
+++ b/apollo-portal/src/main/resources/static/views/component/namespace-panel-master-tab.html
@@ -332,7 +332,7 @@
                                         title="{{'Component.Namespace.Master.Items.Body.PublishedTitle' | translate }}"
                                         ng-if="!config.isModified">{{'Component.Namespace.Master.Items.Body.Published' | translate }}</span>
                                 </td>
-                                <td width="15%" class="cursor-pointer"
+                                <td width="20%" class="cursor-pointer"
                                     title="{{'Component.Namespace.Master.Items.Body.ClickToSee' | translate }}"
                                     ng-click="showText(config.item.key)">
                                     <span ng-bind="config.item.key | limitTo: 250"></span>
@@ -352,7 +352,7 @@
                                         data-placement="bottom"
                                         title="{{'Component.Namespace.Master.Items.Body.DeletedTips' | translate }}">{{'Component.Namespace.Master.Items.Body.Deleted' | translate }}</span>
                                 </td>
-                                <td width="7%" class="text-center">
+                                <td width="6%" class="text-center">
                                     <span ng-if="config.item.type == '0'"
                                     >{{'Component.ConfigItem.ItemTypeString' | translate }}</span>
                                     <span ng-if="config.item.type == '1'"
@@ -368,17 +368,18 @@
                                     <span ng-bind="config.item.value | limitTo: 250"></span>
                                     <span ng-bind="config.item.value.length > 250 ? '...': ''"></span>
                                 </td>
-                                <td width="11%" title="{{config.item.comment}}">
+                                <td width="15%" title="{{config.item.comment}}">
                                     <span ng-bind="config.item.comment | limitTo: 250"></span>
                                     <span ng-bind="config.item.comment.length > 250 ?'...' : ''"></span>
                                 </td>
-                                <td width="10%" ng-bind="config.item.dataChangeLastModifiedByDisplayName + '(' + config.item.dataChangeLastModifiedBy + ')'">
+                                <td width="10%" class="text-center"
+                                    ng-bind="config.item.dataChangeLastModifiedByDisplayName + '(' + config.item.dataChangeLastModifiedBy + ')'">
                                 </td>
-                                <td width="16%"
+                                <td width="10%" class="text-center"
                                     ng-bind="config.item.dataChangeLastModifiedTime | date: 'yyyy-MM-dd HH:mm:ss'">
                                 </td>
 
-                                <td width="8%" class="text-center" ng-if="!config.isDeleted">
+                                <td width="6%" class="text-center" ng-if="!config.isDeleted">
                                     <img src="img/edit.png" data-tooltip="tooltip" data-placement="bottom"
                                         title="{{'Component.Namespace.Master.Items.Body.ModifyTips' | translate }}"
                                         ng-click="editItem(namespace, config.item)"