diff --git a/packages/common/business_components/src/ui/table/HeadMakeColSpan.tsx b/packages/common/business_components/src/ui/table/HeadMakeColSpan.tsx
index c0ec33233..b3d3fdc40 100644
--- a/packages/common/business_components/src/ui/table/HeadMakeColSpan.tsx
+++ b/packages/common/business_components/src/ui/table/HeadMakeColSpan.tsx
@@ -8,7 +8,8 @@ interface TableUpperProps {
   row? : number;
   rowSpan?: number;
   colSpan?: number;
-  visible?:boolean; 
+  visible?:boolean;
+  widthPercent?: number;
 }
 
 const HeadMakeColSpan = ({ upHeadList }: { upHeadList: TableUpperProps[] }) => {
@@ -52,7 +53,7 @@ const HeadMakeColSpan = ({ upHeadList }: { upHeadList: TableUpperProps[] }) => {
                     colSpan={head.colSpan || 1} 
                     rowSpan={head.rowSpan || 1} 
                     style={{ whiteSpace: 'pre-line' }} 
-                    className="bg-gray-50"
+                    className="bg-gray-50" 
                   >
                     {head.title}
                   </TableHead>
diff --git a/packages/common/business_components/src/ui/table/index.tsx b/packages/common/business_components/src/ui/table/index.tsx
index 6d5b24c70..dc763d00b 100644
--- a/packages/common/business_components/src/ui/table/index.tsx
+++ b/packages/common/business_components/src/ui/table/index.tsx
@@ -32,6 +32,7 @@ type UiTableProps = {
   index?: number;
   curPage?: number;
   headButton?: React.ReactNode | undefined;
+  widthFixed?: boolean;
 };
 
 type UiHeadProps = {
@@ -39,6 +40,9 @@ type UiHeadProps = {
   title: string;
   align?: string;
   visible?: boolean;
+  row?: number;
+  widthPercent?: number;
+  rowSpan?: number;
 };
 
 export function UiTable({
@@ -57,6 +61,7 @@ export function UiTable({
   index = -1,
   curPage = 1,
   headButton = undefined,
+  widthFixed = false
 }: UiTableProps) {
   const [cur, setCur] = useState<number>(curPage);
   const [idx, setIdx] = useState<number>(index);
@@ -104,6 +109,15 @@ export function UiTable({
     }
   };
 
+  const getLeafCols = (list: UiHeadProps[]) => {
+    const maxRow = list?.reduce((max, head) => Math.max(max, head.row || 0), 0);
+    return list
+      .filter(h => h.visible !== false)
+      .filter(h => ((h.row ?? 0) + (h.rowSpan ?? 1) - 1) >= maxRow)
+      ;
+  };
+
+  const leafCols = getLeafCols(headlist);
 
   return (
     <>
@@ -122,7 +136,13 @@ export function UiTable({
         <></>
       )}
       <div className={`card !p-0r !m-[1.2rem] ${className}`}>
-        <Table variant="secondary">
+        <Table variant="secondary" className={widthFixed?"table-fixed":""}>
+          {widthFixed?
+          <colgroup>
+            {leafCols.map(col => (
+            <col key={col.id} style={{ width: col.widthPercent ? `${col.widthPercent}%` : undefined }} />
+            ))}
+          </colgroup>:""}
           <TableHeader ref={headerRef} className="font-bold">
             {children ? children : <HeadMakeColSpan upHeadList={headlist} />}
           </TableHeader>