diff --git a/src/components/flight/ControlApprovalsTable.js b/src/components/flight/ControlApprovalsTable.js
index bc5cce8f..44603c80 100644
--- a/src/components/flight/ControlApprovalsTable.js
+++ b/src/components/flight/ControlApprovalsTable.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Button, Card } from '@component/ui';
 import { openModal } from '@src/redux/features/comn/message/messageSlice';
@@ -13,7 +13,7 @@ import {
   updateLaancAprvReview
 } from '@src/redux/features/laanc/laancThunk';
 import { ERROR_MESSAGE, ERROR_TITLE } from '@src/configs/msgConst';
-import { CgKey } from 'react-icons/cg';
+import ScrollContainer from 'react-indiana-drag-scroll';
 
 export default function ControlApprovalsTable(props) {
   const dispatch = useDispatch();
@@ -31,6 +31,8 @@ export default function ControlApprovalsTable(props) {
     U: 0
   });
 
+  const scrollContainerRef = useRef(null);
+
   // 확장된 행 키
   const [expandedRowKeys, setExpandedRowKeys] = useState([]);
 
@@ -1277,82 +1279,91 @@ export default function ControlApprovalsTable(props) {
       </div>
       <div className='invoice-list-wrapper'>
         <Card>
-          <div
-            className='invoice-list-dataTable flight-approval'
-            style={{ width: '100%' }}
-          >
+          <div className='invoice-list-dataTable flight-approval'>
             {laancAprvList?.length > 0 ? (
               <Form form={form} component={false}>
-                <Table
-                  components={{
-                    body: {
-                      cell: EditableCell
-                    }
-                  }}
-                  dataSource={laancAprvList.map((item, index) => ({
-                    ...item,
-                    key: `parent_${item.planSno}`
-                  }))}
-                  columns={mergedColumns}
-                  rowClassName={record => {
-                    let className = '';
-                    if (record.areaList.length <= 1) {
-                      if (record?.areaList[0]?.approvalCd === 'S') {
-                        className += 'flight-approval-row editable-row';
-                      } else if (record.areaList[0].approvalCd === 'F') {
-                        className += 'flight-not-approval-row editable-row';
-                      } else if (record.areaList[0].approvalCd === 'C') {
-                        className +=
-                          'flight-condition-approval-row editable-row';
-                      } else className += 'editable-row';
-                    }
-                    if (
-                      record.areaList.length <= 1 &&
-                      record.areaList[0].planAreaSno === props.selected
-                    ) {
-                      className += ' flight-approval-row-click';
-                    }
-                    if (expandedRowKeys.includes(record.key)) {
-                      className += ' expanded-row';
-                    }
-                    if (record.areaList.length > 1) {
-                      className += 'expanded-tr';
-                    }
-                    return className;
-                  }}
-                  rowSelection={{
-                    ...rowSelection
-                  }}
-                  onRow={record => ({
-                    onClick: event => {
-                      if (editingKey !== '') {
-                        return; // edit 상태면 이벤트 실행 안 함
-                      }
-                      setSelectedRowKey(record.planAreaSno);
-                      // 이벤트 버블링을 막기 위해 클릭된 요소가 'Edit' 버튼인지 확인
-                      if (
-                        event.target.tagName !== 'BUTTON' &&
-                        event.target.tagName !== 'A' &&
-                        !event.target.closest('.ant-input') && // input 요소를 감지
-                        !event.target.closest('.ant-input-number') // inputNumber 요소를 감지
-                      ) {
-                        handleRowClick(record);
-                      }
-                    }
-                  })}
-                  loading={laancAprvLoading}
-                  expandable={{
-                    expandedRowRender,
-                    expandedRowKeys: expandedRowKeys,
-                    onExpand: (expanded, record) => handleExpand(record.key),
-                    rowExpandable: record => record?.areaList?.length > 1
-                  }}
-                  scroll={{
-                    x: 1700
-                  }}
-                  rowHoverable={false}
-                  expandIconColumnIndex={-1}
-                />
+                <ScrollContainer
+                  className='scroll-container'
+                  ref={scrollContainerRef}
+                  hideScrollbars={false}
+                  vertical={true}
+                  horizontal={true}
+                  activationDistance={10}
+                >
+                  <div style={{ width: '2000px' }}>
+                    <Table
+                      components={{
+                        body: {
+                          cell: EditableCell
+                        }
+                      }}
+                      dataSource={laancAprvList.map((item, index) => ({
+                        ...item,
+                        key: `parent_${item.planSno}`
+                      }))}
+                      columns={mergedColumns}
+                      rowClassName={record => {
+                        let className = '';
+                        if (record.areaList.length <= 1) {
+                          if (record?.areaList[0]?.approvalCd === 'S') {
+                            className += 'flight-approval-row editable-row';
+                          } else if (record.areaList[0].approvalCd === 'F') {
+                            className += 'flight-not-approval-row editable-row';
+                          } else if (record.areaList[0].approvalCd === 'C') {
+                            className +=
+                              'flight-condition-approval-row editable-row';
+                          } else className += 'editable-row';
+                        }
+                        if (
+                          record.areaList.length <= 1 &&
+                          record.areaList[0].planAreaSno === props.selected
+                        ) {
+                          className += ' flight-approval-row-click';
+                        }
+                        if (expandedRowKeys.includes(record.key)) {
+                          className += ' expanded-row';
+                        }
+                        if (record.areaList.length > 1) {
+                          className += 'expanded-tr';
+                        }
+                        return className;
+                      }}
+                      rowSelection={{
+                        ...rowSelection
+                      }}
+                      onRow={record => ({
+                        onClick: event => {
+                          if (editingKey !== '') {
+                            return; // edit 상태면 이벤트 실행 안 함
+                          }
+                          setSelectedRowKey(record.planAreaSno);
+                          // 이벤트 버블링을 막기 위해 클릭된 요소가 'Edit' 버튼인지 확인
+                          if (
+                            event.target.tagName !== 'BUTTON' &&
+                            event.target.tagName !== 'A' &&
+                            !event.target.closest('.ant-input') && // input 요소를 감지
+                            !event.target.closest('.ant-input-number') // inputNumber 요소를 감지
+                          ) {
+                            handleRowClick(record);
+                          }
+                        }
+                      })}
+                      loading={laancAprvLoading}
+                      expandable={{
+                        expandedRowRender,
+                        expandedRowKeys: expandedRowKeys,
+                        onExpand: (expanded, record) =>
+                          handleExpand(record.key),
+                        rowExpandable: record => record?.areaList?.length > 1
+                      }}
+                      scroll={{
+                        x: 1700
+                      }}
+                      rowHoverable={false}
+                      expandIconColumnIndex={-1}
+                    />
+                  </div>
+                </ScrollContainer>
               </Form>
             ) : (
               <div
diff --git a/src/components/flight/OperationApprovalsTable.js b/src/components/flight/OperationApprovalsTable.js
index 72a91afe..a61c3600 100644
--- a/src/components/flight/OperationApprovalsTable.js
+++ b/src/components/flight/OperationApprovalsTable.js
@@ -10,6 +10,7 @@ import {
 } from '@src/redux/features/laanc/laancThunk';
 import { ERROR_MESSAGE, ERROR_TITLE } from '@src/configs/msgConst';
 import OperationModal from './OperationModal';
+import ScrollContainer from 'react-indiana-drag-scroll';
 
 export default function OperationApprovalsTable(props) {
   const dispatch = useDispatch();
@@ -27,6 +28,8 @@ export default function OperationApprovalsTable(props) {
     U: 0
   });
 
+  const scrollContainerRef = useRef(null);
+
   // 확장된 행 키
   const [expandedRowKeys, setExpandedRowKeys] = useState([]);
 
@@ -1086,86 +1089,94 @@ export default function OperationApprovalsTable(props) {
       </div>
       <div className='invoice-list-wrapper'>
         <Card>
-          <div
-            className='invoice-list-dataTable flight-approval'
-            style={{ width: '100%' }}
-          >
+          <div className='invoice-list-dataTable flight-approval'>
             {laancAprvList?.length > 0 ? (
               <Form form={form} component={false}>
-                <Table
-                  components={{
-                    body: {
-                      cell: EditableCell
-                    }
-                  }}
-                  dataSource={laancAprvList.map((item, index) => ({
-                    ...item,
-                    key:
-                      item.areaList.length >= 1
-                        ? `${item.planAreaSno}-${index}`
-                        : `${item.planAreaSno}`
-                  }))}
-                  columns={mergedColumns}
-                  rowClassName={record => {
-                    let className = '';
-                    if (record.areaList.length <= 1) {
-                      if (record?.areaList[0]?.approvalCd === 'S') {
-                        className += 'flight-approval-row editable-row';
-                      } else if (record.areaList[0].approvalCd === 'F') {
-                        className += 'flight-not-approval-row editable-row';
-                      } else if (record.areaList[0].approvalCd === 'C') {
-                        className +=
-                          'flight-condition-approval-row editable-row';
-                      } else className += 'editable-row';
-                    }
+                <ScrollContainer
+                  className='scroll-container'
+                  ref={scrollContainerRef}
+                  hideScrollbars={false}
+                  vertical={true}
+                  horizontal={true}
+                  activationDistance={10}
+                >
+                  <div style={{ width: '2000px' }}>
+                    <Table
+                      components={{
+                        body: {
+                          cell: EditableCell
+                        }
+                      }}
+                      dataSource={laancAprvList.map((item, index) => ({
+                        ...item,
+                        key:
+                          item.areaList.length >= 1
+                            ? `${item.planAreaSno}-${index}`
+                            : `${item.planAreaSno}`
+                      }))}
+                      columns={mergedColumns}
+                      rowClassName={record => {
+                        let className = '';
+                        if (record.areaList.length <= 1) {
+                          if (record?.areaList[0]?.approvalCd === 'S') {
+                            className += 'flight-approval-row editable-row';
+                          } else if (record.areaList[0].approvalCd === 'F') {
+                            className += 'flight-not-approval-row editable-row';
+                          } else if (record.areaList[0].approvalCd === 'C') {
+                            className +=
+                              'flight-condition-approval-row editable-row';
+                          } else className += 'editable-row';
+                        }
 
-                    if (props.selected?.length > 0) {
-                      if (
-                        record.areaList.length <= 1 &&
-                        record.areaList[0].planAreaSno === props.selected[0]
-                      ) {
-                        className += ' flight-approval-row-click';
-                      }
-                    }
+                        if (props.selected?.length > 0) {
+                          if (
+                            record.areaList.length <= 1 &&
+                            record.areaList[0].planAreaSno === props.selected[0]
+                          ) {
+                            className += ' flight-approval-row-click';
+                          }
+                        }
 
-                    if (expandedRowKeys.includes(record.key)) {
-                      className += ' expanded-row';
-                    }
-                    if (record.areaList.length > 1) {
-                      className += 'expanded-tr';
-                    }
-                    return className;
-                  }}
-                  onRow={record => ({
-                    onClick: event => {
-                      if (editingKey !== '') {
-                        return; // edit 상태면 이벤트 실행 안 함
-                      }
-                      setSelectedRowKey(record.planAreaSno);
-                      // 이벤트 버블링을 막기 위해 클릭된 요소가 'Edit' 버튼인지 확인
-                      if (
-                        event.target.tagName !== 'BUTTON' &&
-                        event.target.tagName !== 'A' &&
-                        !event.target.closest('.ant-input') && // input 요소를 감지
-                        !event.target.closest('.ant-input-number') // inputNumber 요소를 감지
-                      ) {
-                        handleRowClick(record);
-                      }
-                    }
-                  })}
-                  loading={laancAprvLoading}
-                  expandable={{
-                    expandedRowRender,
-                    expandedRowKeys: expandedRowKeys,
-                    onExpand: (expanded, record) => handleExpand(record),
-                    rowExpandable: record => record?.areaList?.length > 1
-                  }}
-                  scroll={{
-                    x: 1700
-                  }}
-                  rowHoverable={false}
-                  expandIconColumnIndex={-1}
-                />
+                        if (expandedRowKeys.includes(record.key)) {
+                          className += ' expanded-row';
+                        }
+                        if (record.areaList.length > 1) {
+                          className += 'expanded-tr';
+                        }
+                        return className;
+                      }}
+                      onRow={record => ({
+                        onClick: event => {
+                          if (editingKey !== '') {
+                            return; // edit 상태면 이벤트 실행 안 함
+                          }
+                          setSelectedRowKey(record.planAreaSno);
+                          // 이벤트 버블링을 막기 위해 클릭된 요소가 'Edit' 버튼인지 확인
+                          if (
+                            event.target.tagName !== 'BUTTON' &&
+                            event.target.tagName !== 'A' &&
+                            !event.target.closest('.ant-input') && // input 요소를 감지
+                            !event.target.closest('.ant-input-number') // inputNumber 요소를 감지
+                          ) {
+                            handleRowClick(record);
+                          }
+                        }
+                      })}
+                      loading={laancAprvLoading}
+                      expandable={{
+                        expandedRowRender,
+                        expandedRowKeys: expandedRowKeys,
+                        onExpand: (expanded, record) => handleExpand(record),
+                        rowExpandable: record => record?.areaList?.length > 1
+                      }}
+                      scroll={{
+                        x: 1700
+                      }}
+                      rowHoverable={false}
+                      expandIconColumnIndex={-1}
+                    />
+                  </div>
+                </ScrollContainer>
               </Form>
             ) : (
               <div