diff --git a/app/Helpers/Mapurl_helper.php b/app/Helpers/Mapurl_helper.php
index 988469c..b1fd365 100644
--- a/app/Helpers/Mapurl_helper.php
+++ b/app/Helpers/Mapurl_helper.php
@@ -30,7 +30,7 @@ function getFieldForm_MapurlHelper(string $field, mixed $value, array $viewDatas
             $form = form_input($field, $value, [
                 "placeholder" => "예)https://new.example.com",
                 "style" =>
-                "width:100%; ::placeholder{color:silver; opacity: 1;}",
+                    "width:100%; ::placeholder{color:silver; opacity: 1;}",
                 "class" => "form-control",
                 (strpos($viewDatas['field_rules'][$field], 'required') !== false) ? "required" : ""
             ]);
@@ -51,7 +51,7 @@ function getFieldForm_MapurlHelper(string $field, mixed $value, array $viewDatas
         default:
             $form = form_input($field, $value, [
                 "style" =>
-                "width:100%;",
+                    "width:100%;",
                 "class" => "form-control",
                 (strpos($viewDatas['field_rules'][$field], 'required') !== false) ? "required" : ""
             ]);
@@ -108,7 +108,7 @@ function getListLabel_MapurlHelper(string $field, array $viewDatas, array $extra
         $order_value = $viewDatas['order_value'] == 'DESC' ? "ASC" : "DESC";
         $viewDatas['uri']->addQuery('order_field', $field);
         $viewDatas['uri']->addQuery('order_value', $order_value);
-        $label = anchor((string)$viewDatas['uri'], $label);
+        $label = anchor((string) $viewDatas['uri'], $label);
     }
     switch ($field) {
         case MapurlModel::TITLE:
@@ -122,7 +122,7 @@ function getListButton_MapurlHelper(string $action, array $viewDatas, array $ext
         case 'create':
             $viewDatas['list_action_url'] = current_url() . '/' . $action;
             $extras = ["class" => "btn btn-outline btn-primary btn-circle", "target" => "_self", ...$extras];
-            $action = getListButtonLabel_CommonHelper($action, '입력',  $viewDatas, $extras);
+            $action = getListButtonLabel_CommonHelper($action, '입력', $viewDatas, $extras);
             break;
         case 'modify':
             $pk = $viewDatas['entity']->getPK();
diff --git a/app/Views/admin/cloudflare/account/index.php b/app/Views/admin/cloudflare/account/index.php
index 1b181cc..b952be3 100644
--- a/app/Views/admin/cloudflare/account/index.php
+++ b/app/Views/admin/cloudflare/account/index.php
@@ -4,14 +4,14 @@
 <script type="text/javascript" src="/js/<?= $viewDatas['layout'] ?>/content.js"></script>
 <?= $this->include('templates/' . $viewDatas['layout'] . '/index_top'); ?>
 <?= form_open(current_url() . '/batchjob', $viewDatas['forms']['attributes'], $viewDatas['forms']['hiddens']) ?>
-<table class="index_table table table-bordered table-hover table-striped">
+<table class="index_table data table table-bordered table-hover table-striped" data-rtc-resizable-table="table.account">
   <thead>
     <tr>
-      <th>번호</th>
+      <th nowrap>번호</th>
       <?php foreach ($viewDatas['fields'] as $field): ?>
-        <?= getListLabel_AccountHelper($field, $viewDatas) ?>
+        <?= getListLabel_AccountHelper($field, $viewDatas, ["data-rtc-resizable=\"{$field}\""]) ?>
       <?php endforeach ?>
-      <th>작업</th>
+      <th nowrap>작업</th>
     </tr>
   </thead>
   <tbody>
@@ -22,13 +22,13 @@
         <?php $viewDatas['cnt'] = $viewDatas['total_count'] - (($viewDatas['page'] - 1) * $viewDatas['per_page'] + $cnt); ?>
         <?php $viewDatas['entity'] = $entity; ?>
         <?php $viewDatas['old_auth'] = $old_auth ?>
-        <td class="text-center text-wrap">
+        <td class="text-center" nowrap>
           <?= getListButton_AccountHelper('sync', $viewDatas, ["style" => "cursor:pointer"]) ?>
         </td>
         <?php foreach ($viewDatas['fields'] as $field): ?>
           <td><?= getFieldView_AccountHelper($field, $viewDatas) ?></td>
         <?php endforeach ?>
-        <td>
+        <td nowrap>
           <?= getListButton_AccountHelper('delete', $viewDatas) ?>
         </td>
       </tr>
@@ -48,4 +48,23 @@
 </div>
 <?= form_close() ?>
 <div class=" index_pagination"><?= $viewDatas['pagination'] ?></div>
+<link href="/css/resizeTable.css" media="screen" rel="stylesheet" type="text/css" />
+<script type="text/javascript" src="/js/resizeTable.js"></script>
+<script>
+  (function (window, ResizableTableColumns, undefined) {
+    var store = window.store && window.store.enabled ? window.store : null;
+    var els = document.querySelectorAll('table.data');
+    for (var index = 0; index < els.length; index++) {
+      var table = els[index];
+      if (table['rtc_data_object']) {
+        continue;
+      }
+      var options = { store: store };
+      if (table.querySelectorAll('thead > tr').length > 1) {
+        options.resizeFromBody = false;
+      }
+      new ResizableTableColumns(els[index], options);
+    }
+  })(window, window.validide_resizableTableColumns.ResizableTableColumns, void (0));
+</script>
 <?= $this->endSection() ?>
\ No newline at end of file
diff --git a/app/Views/admin/cloudflare/auth/index.php b/app/Views/admin/cloudflare/auth/index.php
index 7a33ef9..ca4b86d 100644
--- a/app/Views/admin/cloudflare/auth/index.php
+++ b/app/Views/admin/cloudflare/auth/index.php
@@ -4,14 +4,14 @@
 <script type="text/javascript" src="/js/<?= $viewDatas['layout'] ?>/content.js"></script>
 <?= $this->include('templates/' . $viewDatas['layout'] . '/index_top'); ?>
 <?= form_open(current_url() . '/batchjob', $viewDatas['forms']['attributes'], $viewDatas['forms']['hiddens']) ?>
-<table class="index_table table table-bordered table-hover table-striped">
+<table class="index_table data table table-bordered table-hover table-striped" data-rtc-resizable-table="table.auth">
   <thead>
     <tr>
-      <th>번호</th>
+      <th nowrap>번호</th>
       <?php foreach ($viewDatas['fields'] as $field): ?>
-        <?= getListLabel_AuthHelper($field, $viewDatas) ?>
+        <?= getListLabel_AuthHelper($field, $viewDatas, ["data-rtc-resizable=\"{$field}\""]) ?>
       <?php endforeach ?>
-      <th>작업</th>
+      <th nowrap>작업</th>
     </tr>
   </thead>
   <tbody>
@@ -20,14 +20,14 @@
       <tr <?= $entity->status != DEFAULTS['STATUS'] ? 'class="table-danger" rowcolor="red"' : 'rowcolor="red"' ?>>
         <?php $viewDatas['cnt'] = $viewDatas['total_count'] - (($viewDatas['page'] - 1) * $viewDatas['per_page'] + $cnt); ?>
         <?php $viewDatas['entity'] = $entity; ?>
-        <td class="text-center text-wrap">
+        <td class="text-center" nowrap>
           <?= getListButton_AuthHelper('modify', $viewDatas, ["style" => "cursor:pointer"]) ?>
         </td>
         <?php foreach ($viewDatas['fields'] as $field): ?>
-          <td><?= getFieldView_AuthHelper($field,  $viewDatas) ?></td>
+          <td><?= getFieldView_AuthHelper($field, $viewDatas) ?></td>
         <?php endforeach ?>
-        <td>
-          <?= getListButton_AuthHelper('delete',  $viewDatas) ?>
+        <td nowrap>
+          <?= getListButton_AuthHelper('delete', $viewDatas) ?>
         </td>
       </tr>
       <?php $cnt++ ?>
@@ -49,4 +49,23 @@
 <?php if (in_array($viewDatas['action_form'], [FORMS['MODAL'], FORMS['IFRAME']])): ?>
   <?= $this->include('templates/' . $viewDatas['layout'] . '/' . $viewDatas['action_form']); ?>
 <?php endif ?>
+<link href="/css/resizeTable.css" media="screen" rel="stylesheet" type="text/css" />
+<script type="text/javascript" src="/js/resizeTable.js"></script>
+<script>
+  (function (window, ResizableTableColumns, undefined) {
+    var store = window.store && window.store.enabled ? window.store : null;
+    var els = document.querySelectorAll('table.data');
+    for (var index = 0; index < els.length; index++) {
+      var table = els[index];
+      if (table['rtc_data_object']) {
+        continue;
+      }
+      var options = { store: store };
+      if (table.querySelectorAll('thead > tr').length > 1) {
+        options.resizeFromBody = false;
+      }
+      new ResizableTableColumns(els[index], options);
+    }
+  })(window, window.validide_resizableTableColumns.ResizableTableColumns, void (0));
+</script>
 <?= $this->endSection() ?>
\ No newline at end of file
diff --git a/app/Views/admin/cloudflare/record/index.php b/app/Views/admin/cloudflare/record/index.php
index 63b3737..9b59964 100644
--- a/app/Views/admin/cloudflare/record/index.php
+++ b/app/Views/admin/cloudflare/record/index.php
@@ -4,14 +4,14 @@
 <script type="text/javascript" src="/js/<?= $viewDatas['layout'] ?>/content.js"></script>
 <?= $this->include('templates/' . $viewDatas['layout'] . '/index_top'); ?>
 <?= form_open(current_url() . '/batchjob', $viewDatas['forms']['attributes'], $viewDatas['forms']['hiddens']) ?>
-<table class="index_table table table-bordered table-hover table-striped">
+<table class="index_table data table table-bordered table-hover table-striped" data-rtc-resizable-table="table.record">
   <thead>
     <tr>
-      <th>번호</th>
+      <th nowrap>번호</th>
       <?php foreach ($viewDatas['fields'] as $field): ?>
-        <?= getListLabel_RecordHelper($field, $viewDatas) ?>
+        <?= getListLabel_RecordHelper($field, $viewDatas, ["data-rtc-resizable=\"{$field}\""]) ?>
       <?php endforeach ?>
-      <th>작업</th>
+      <th nowrap>작업</th>
     </tr>
   </thead>
   <tbody>
@@ -22,14 +22,14 @@
         <?php $viewDatas['cnt'] = $viewDatas['total_count'] - (($viewDatas['page'] - 1) * $viewDatas['per_page'] + $cnt); ?>
         <?php $viewDatas['entity'] = $entity; ?>
         <?php $viewDatas['old_zone'] = $old_zone ?>
-        <td class="text-center text-wrap">
+        <td class="text-center" nowrap>
           <?= getListButton_RecordHelper('sync', $viewDatas, ["style" => "cursor:pointer"]) ?>
         </td>
         <?php foreach ($viewDatas['fields'] as $field): ?>
-          <td><?= getFieldView_RecordHelper($field,  $viewDatas) ?></td>
+          <td><?= getFieldView_RecordHelper($field, $viewDatas) ?></td>
         <?php endforeach ?>
-        <td>
-          <?= getListButton_RecordHelper('delete',  $viewDatas) ?>
+        <td nowrap>
+          <?= getListButton_RecordHelper('delete', $viewDatas) ?>
         </td>
       </tr>
       <?php $old_zone = $entity->getParent() ?>
@@ -52,4 +52,23 @@
 <?php if (in_array($viewDatas['action_form'], [FORMS['MODAL'], FORMS['IFRAME']])): ?>
   <?= $this->include('templates/' . $viewDatas['layout'] . '/' . $viewDatas['action_form']); ?>
 <?php endif ?>
+<link href="/css/resizeTable.css" media="screen" rel="stylesheet" type="text/css" />
+<script type="text/javascript" src="/js/resizeTable.js"></script>
+<script>
+  (function (window, ResizableTableColumns, undefined) {
+    var store = window.store && window.store.enabled ? window.store : null;
+    var els = document.querySelectorAll('table.data');
+    for (var index = 0; index < els.length; index++) {
+      var table = els[index];
+      if (table['rtc_data_object']) {
+        continue;
+      }
+      var options = { store: store };
+      if (table.querySelectorAll('thead > tr').length > 1) {
+        options.resizeFromBody = false;
+      }
+      new ResizableTableColumns(els[index], options);
+    }
+  })(window, window.validide_resizableTableColumns.ResizableTableColumns, void (0));
+</script>
 <?= $this->endSection() ?>
\ No newline at end of file
diff --git a/app/Views/admin/cloudflare/zone/index.php b/app/Views/admin/cloudflare/zone/index.php
index 5d5887e..3d06165 100644
--- a/app/Views/admin/cloudflare/zone/index.php
+++ b/app/Views/admin/cloudflare/zone/index.php
@@ -4,14 +4,14 @@
 <script type="text/javascript" src="/js/<?= $viewDatas['layout'] ?>/content.js"></script>
 <?= $this->include('templates/' . $viewDatas['layout'] . '/index_top'); ?>
 <?= form_open(current_url() . '/batchjob', $viewDatas['forms']['attributes'], $viewDatas['forms']['hiddens']) ?>
-<table class="index_table table table-bordered table-hover table-striped">
+<table class="index_table data table table-bordered table-hover table-striped" data-rtc-resizable-table="table.zone">
   <thead>
     <tr>
-      <th>번호</th>
+      <th nowrap>번호</th>
       <?php foreach ($viewDatas['fields'] as $field): ?>
-        <?= getListLabel_ZoneHelper($field, $viewDatas) ?>
+        <?= getListLabel_ZoneHelper($field, $viewDatas, ["data-rtc-resizable=\"{$field}\""]) ?>
       <?php endforeach ?>
-      <th>작업</th>
+      <th nowrap>작업</th>
     </tr>
   </thead>
   <tbody>
@@ -22,14 +22,14 @@
         <?php $viewDatas['cnt'] = $viewDatas['total_count'] - (($viewDatas['page'] - 1) * $viewDatas['per_page'] + $cnt); ?>
         <?php $viewDatas['entity'] = $entity ?>
         <?php $viewDatas['old_account'] = $old_account ?>
-        <td class="text-center text-wrap">
+        <td class="text-center" nowrap>
           <?= getListButton_ZoneHelper('sync', $viewDatas, ["style" => "cursor:pointer"]) ?>
         </td>
         <?php foreach ($viewDatas['fields'] as $field): ?>
-          <td><?= getFieldView_ZoneHelper($field,  $viewDatas) ?></td>
+          <td><?= getFieldView_ZoneHelper($field, $viewDatas) ?></td>
         <?php endforeach ?>
-        <td>
-          <?= getListButton_ZoneHelper('delete',  $viewDatas) ?>
+        <td nowrap>
+          <?= getListButton_ZoneHelper('delete', $viewDatas) ?>
         </td>
       </tr>
       <?php $old_account = $entity->getParent() ?>
@@ -52,4 +52,23 @@
 <?php if (in_array($viewDatas['action_form'], [FORMS['MODAL'], FORMS['IFRAME']])): ?>
   <?= $this->include('templates/' . $viewDatas['layout'] . '/' . $viewDatas['action_form']); ?>
 <?php endif ?>
+<link href="/css/resizeTable.css" media="screen" rel="stylesheet" type="text/css" />
+<script type="text/javascript" src="/js/resizeTable.js"></script>
+<script>
+  (function (window, ResizableTableColumns, undefined) {
+    var store = window.store && window.store.enabled ? window.store : null;
+    var els = document.querySelectorAll('table.data');
+    for (var index = 0; index < els.length; index++) {
+      var table = els[index];
+      if (table['rtc_data_object']) {
+        continue;
+      }
+      var options = { store: store };
+      if (table.querySelectorAll('thead > tr').length > 1) {
+        options.resizeFromBody = false;
+      }
+      new ResizableTableColumns(els[index], options);
+    }
+  })(window, window.validide_resizableTableColumns.ResizableTableColumns, void (0));
+</script>
 <?= $this->endSection() ?>
\ No newline at end of file
diff --git a/app/Views/admin/mapurl/index.php b/app/Views/admin/mapurl/index.php
index d92ecb5..ed23256 100644
--- a/app/Views/admin/mapurl/index.php
+++ b/app/Views/admin/mapurl/index.php
@@ -4,14 +4,14 @@
 <script type="text/javascript" src="/js/<?= $viewDatas['layout'] ?>/content.js"></script>
 <?= $this->include('templates/' . $viewDatas['layout'] . '/index_top'); ?>
 <?= form_open(current_url() . '/batchjob', $viewDatas['forms']['attributes'], $viewDatas['forms']['hiddens']) ?>
-<table class="index_table table table-bordered table-hover table-striped">
+<table class="index_table data table table-bordered table-hover table-striped" data-rtc-resizable-table="table.mapurl">
   <thead>
     <tr>
-      <th>번호</th>
+      <th nowrap>번호</th>
       <?php foreach ($viewDatas['fields'] as $field): ?>
-        <?= getListLabel_MapurlHelper($field, $viewDatas) ?>
+        <?= getListLabel_MapurlHelper($field, $viewDatas, ["data-rtc-resizable=\"{$field}\""]) ?>
       <?php endforeach ?>
-      <th>작업</th>
+      <th nowrap>작업</th>
     </tr>
   </thead>
   <tbody>
@@ -20,14 +20,14 @@
       <tr <?= $entity->status != DEFAULTS['STATUS'] ? 'class="table-danger" rowcolor="red"' : 'rowcolor="red"' ?>>
         <?php $viewDatas['cnt'] = $viewDatas['total_count'] - (($viewDatas['page'] - 1) * $viewDatas['per_page'] + $cnt); ?>
         <?php $viewDatas['entity'] = $entity; ?>
-        <td class="text-center text-wrap">
+        <td class="text-center" nowrap>
           <?= getListButton_MapurlHelper('modify', $viewDatas, ["style" => "cursor:pointer"]) ?>
         </td>
         <?php foreach ($viewDatas['fields'] as $field): ?>
-          <td><?= getFieldView_MapurlHelper($field,  $viewDatas) ?></td>
+          <td><?= getFieldView_MapurlHelper($field, $viewDatas) ?></td>
         <?php endforeach ?>
-        <td>
-          <?= getListButton_MapurlHelper('delete',  $viewDatas) ?>
+        <td nowrap>
+          <?= getListButton_MapurlHelper('delete', $viewDatas) ?>
         </td>
       </tr>
       <?php $cnt++ ?>
@@ -49,4 +49,23 @@
 <?php if (in_array($viewDatas['action_form'], [FORMS['MODAL'], FORMS['IFRAME']])): ?>
   <?= $this->include('templates/' . $viewDatas['layout'] . '/' . $viewDatas['action_form']); ?>
 <?php endif ?>
+<link href="/css/resizeTable.css" media="screen" rel="stylesheet" type="text/css" />
+<script type="text/javascript" src="/js/resizeTable.js"></script>
+<script>
+  (function (window, ResizableTableColumns, undefined) {
+    var store = window.store && window.store.enabled ? window.store : null;
+    var els = document.querySelectorAll('table.data');
+    for (var index = 0; index < els.length; index++) {
+      var table = els[index];
+      if (table['rtc_data_object']) {
+        continue;
+      }
+      var options = { store: store };
+      if (table.querySelectorAll('thead > tr').length > 1) {
+        options.resizeFromBody = false;
+      }
+      new ResizableTableColumns(els[index], options);
+    }
+  })(window, window.validide_resizableTableColumns.ResizableTableColumns, void (0));
+</script>
 <?= $this->endSection() ?>
\ No newline at end of file
diff --git a/app/Views/admin/user/index.php b/app/Views/admin/user/index.php
index c2a3755..6407fbb 100644
--- a/app/Views/admin/user/index.php
+++ b/app/Views/admin/user/index.php
@@ -4,14 +4,14 @@
 <script type="text/javascript" src="/js/<?= $viewDatas['layout'] ?>/content.js"></script>
 <?= $this->include('templates/' . $viewDatas['layout'] . '/index_top'); ?>
 <?= form_open(current_url() . '/batchjob', $viewDatas['forms']['attributes'], $viewDatas['forms']['hiddens']) ?>
-<table class="index_table table table-bordered table-hover table-striped">
+<table class="index_table data table table-bordered table-hover table-striped" data-rtc-resizable-table="table.user">
   <thead>
     <tr>
-      <th>번호</th>
+      <th nowrap>번호</th>
       <?php foreach ($viewDatas['fields'] as $field): ?>
-        <?= getListLabel_UserHelper($field, $viewDatas) ?>
+        <?= getListLabel_UserHelper($field, $viewDatas, ["data-rtc-resizable=\"{$field}\""]) ?>
       <?php endforeach ?>
-      <th>작업</th>
+      <th nowrap>작업</th>
     </tr>
   </thead>
   <tbody>
@@ -20,14 +20,14 @@
       <tr <?= $entity->status != DEFAULTS['STATUS'] ? 'class="table-danger" rowcolor="red"' : 'rowcolor="red"' ?>>
         <?php $viewDatas['cnt'] = $viewDatas['total_count'] - (($viewDatas['page'] - 1) * $viewDatas['per_page'] + $cnt); ?>
         <?php $viewDatas['entity'] = $entity; ?>
-        <td class="text-center text-wrap">
+        <td class="text-center" nowrap>
           <?= getListButton_UserHelper('modify', $viewDatas, ["style" => "cursor:pointer"]) ?>
         </td>
         <?php foreach ($viewDatas['fields'] as $field): ?>
-          <td><?= getFieldView_UserHelper($field,  $viewDatas) ?></td>
+          <td><?= getFieldView_UserHelper($field, $viewDatas) ?></td>
         <?php endforeach ?>
-        <td>
-          <?= getListButton_UserHelper('delete',  $viewDatas) ?>
+        <td nowrap>
+          <?= getListButton_UserHelper('delete', $viewDatas) ?>
         </td>
       </tr>
       <?php $cnt++ ?>
@@ -49,4 +49,23 @@
 <?php if (in_array($viewDatas['action_form'], [FORMS['MODAL'], FORMS['IFRAME']])): ?>
   <?= $this->include('templates/' . $viewDatas['layout'] . '/' . $viewDatas['action_form']); ?>
 <?php endif ?>
+<link href="/css/resizeTable.css" media="screen" rel="stylesheet" type="text/css" />
+<script type="text/javascript" src="/js/resizeTable.js"></script>
+<script>
+  (function (window, ResizableTableColumns, undefined) {
+    var store = window.store && window.store.enabled ? window.store : null;
+    var els = document.querySelectorAll('table.data');
+    for (var index = 0; index < els.length; index++) {
+      var table = els[index];
+      if (table['rtc_data_object']) {
+        continue;
+      }
+      var options = { store: store };
+      if (table.querySelectorAll('thead > tr').length > 1) {
+        options.resizeFromBody = false;
+      }
+      new ResizableTableColumns(els[index], options);
+    }
+  })(window, window.validide_resizableTableColumns.ResizableTableColumns, void (0));
+</script>
 <?= $this->endSection() ?>
\ No newline at end of file
diff --git a/app/Views/layouts/admin.php b/app/Views/layouts/admin.php
index 54f24ad..b956f83 100644
--- a/app/Views/layouts/admin.php
+++ b/app/Views/layouts/admin.php
@@ -30,7 +30,7 @@
     <div class="left"><?= $this->include(LAYOUTS[$viewDatas['layout']]['path'] . '/left_menu'); ?></div>
     <div class="right">
       <div class="header"><?= $this->include("templates/{$viewDatas['layout']}/header"); ?></div>
-      <div class="content"><?= $this->renderSection('content') ?></div>
+      <div id="container" class="content"><?= $this->renderSection('content') ?></div>
       <div class="footer"><?= $this->include("templates/{$viewDatas['layout']}/footer"); ?></div>
     </div>
   </div>
diff --git a/app/Views/layouts/empty.php b/app/Views/layouts/empty.php
index cbb0873..4dfa306 100644
--- a/app/Views/layouts/empty.php
+++ b/app/Views/layouts/empty.php
@@ -23,7 +23,7 @@
 </head>
 
 <body>
-  <div class="content"><?= $this->renderSection('content') ?></div>
+  <div id="container" class="content"><?= $this->renderSection('content') ?></div>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/app/Views/layouts/front.php b/app/Views/layouts/front.php
index 5be45a2..742a35b 100644
--- a/app/Views/layouts/front.php
+++ b/app/Views/layouts/front.php
@@ -28,7 +28,7 @@
   </div>
   <div class="middle">
     <div class="header"><?= $this->include("templates/{$viewDatas['layout']}/header"); ?></div>
-    <div class="content"><?= $this->renderSection('content') ?></div>
+    <div id="container" class="content"><?= $this->renderSection('content') ?></div>
     <div class="footer"><?= $this->include("templates/{$viewDatas['layout']}/footer"); ?></div>
   </div>
   <div class="bottom">
diff --git a/app/Views/layouts/main.php b/app/Views/layouts/main.php
index 84c838b..25326ca 100644
--- a/app/Views/layouts/main.php
+++ b/app/Views/layouts/main.php
@@ -30,7 +30,7 @@
     <div class="left"><?= $this->include(LAYOUTS[$viewDatas['layout']]['path'] . '/left_menu'); ?></div>
     <div class="center">
       <div class="header"><?= $this->include("templates/{$viewDatas['layout']}/header"); ?></div>
-      <div class="content"><?= $this->renderSection('content') ?></div>
+      <div id="container" class="content"><?= $this->renderSection('content') ?></div>
       <div class="footer"><?= $this->include("templates/{$viewDatas['layout']}/footer"); ?></div>
     </div>
   </div>
diff --git a/public/css/admin/content.css b/public/css/admin/content.css
index 53d14db..27d7ad9 100644
--- a/public/css/admin/content.css
+++ b/public/css/admin/content.css
@@ -41,8 +41,8 @@ nav.index_top nav.pageinfo {
 /* Table 부분 */
 table.index_table {
   width: 100%;
-  /* table-layout: fixed; 고정 레이아웃 */
-  border-collapse: collapse; /* 테두리 결합 */
+  /* table-layout: fixed; */
+  border-collapse: collapse;
 }
 
 table.index_table thead th {
@@ -57,11 +57,17 @@ table.index_table thead th {
   /* border:1px solid silver; */
 }
 
+table.index_table thead th:active {
+  cursor: grabbing;
+}
+
 div.index_bottom {
   padding-top: 15px;
   text-align: center;
-  word-wrap: break-word; /* 긴 단어 강제 줄바꿈 */
-  white-space: normal; /* 자동 줄바꿈 */
+  word-wrap: break-word;
+  /* 긴 단어 강제 줄바꿈 */
+  white-space: normal;
+  /* 자동 줄바꿈 */
   /* border: 1px solid red; */
 }
 
@@ -121,7 +127,8 @@ table.action_form {
   /* 자동 여백을 이용한 가로 가운데 정렬 */
   /* border: 1px solid blue; */
   /* table-layout: fixed; 고정 레이아웃 */
-  border-collapse: collapse; /* 테두리 결합 */
+  border-collapse: collapse;
+  /* 테두리 결합 */
 }
 
 table.action_form th {
@@ -131,8 +138,10 @@ table.action_form th {
 
 table.action_form td {
   text-align: center;
-  word-wrap: break-word; /* 긴 단어 강제 줄바꿈 */
-  white-space: normal; /* 자동 줄바꿈 */
+  word-wrap: break-word;
+  /* 긴 단어 강제 줄바꿈 */
+  white-space: normal;
+  /* 자동 줄바꿈 */
 }
 
 /* create,modify,view 페이지용 */
\ No newline at end of file
diff --git a/public/css/resizeTable.css b/public/css/resizeTable.css
new file mode 100644
index 0000000..d8d8478
--- /dev/null
+++ b/public/css/resizeTable.css
@@ -0,0 +1,78 @@
+.rtc-hidden {
+    display: none !important;
+}
+
+.rtc-wrapper {
+    position: relative;
+    overflow-x: auto;
+}
+
+.rtc-wrapper table.rtc-table {
+    table-layout: fixed;
+    border-collapse: collapse;
+    white-space: nowrap;
+    margin: 0;
+    width: auto;
+}
+
+.rtc-wrapper table.rtc-table thead,
+.rtc-wrapper table.rtc-table tbody,
+.rtc-wrapper table.rtc-table tfoot {
+    margin: 0;
+}
+
+.rtc-wrapper table.rtc-table thead tr,
+.rtc-wrapper table.rtc-table tbody tr,
+.rtc-wrapper table.rtc-table tfoot tr {
+    margin: 0;
+}
+
+.rtc-wrapper table.rtc-table thead tr th,
+.rtc-wrapper table.rtc-table thead tr td,
+.rtc-wrapper table.rtc-table tbody tr th,
+.rtc-wrapper table.rtc-table tbody tr td,
+.rtc-wrapper table.rtc-table tfoot tr th,
+.rtc-wrapper table.rtc-table tfoot tr td {
+    margin: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.rtc-wrapper table.rtc-table.rtc-table-resizing {
+    cursor: col-resize;
+}
+
+.rtc-wrapper table.rtc-table.rtc-table-resizing thead,
+.rtc-wrapper table.rtc-table.rtc-table-resizing thead>th,
+.rtc-wrapper table.rtc-table.rtc-table-resizing thead>th>a {
+    cursor: col-resize;
+}
+
+.rtc-wrapper table.rtc-table thead tr.invisible,
+.rtc-wrapper table.rtc-table thead tr.invisible th {
+    border: none;
+    margin: 0;
+    padding: 0;
+    height: 0 !important;
+}
+
+.rtc-wrapper .rtc-handle-container {
+    position: relative;
+    padding: 0;
+    margin: 0;
+    border: 0;
+}
+
+.rtc-wrapper .rtc-handle-container .rtc-handle {
+    position: absolute;
+    width: 6.5px;
+    margin-left: -3.575px;
+    z-index: 2;
+    cursor: col-resize;
+}
+
+.rtc-wrapper .rtc-handle-container .rtc-handle:last-of-type {
+    width: 4.5px;
+    margin-left: -4.95px;
+}
\ No newline at end of file
diff --git a/public/js/popup.js b/public/js/popup.js
deleted file mode 100644
index 82d2d11..0000000
--- a/public/js/popup.js
+++ /dev/null
@@ -1,53 +0,0 @@
-function openWin( winName ) {
-	var blnCookie	 = getCookie( winName );
-	var obj = eval( "window." + winName );
-	if( !blnCookie ) {
-		obj.style.display = "block";
-	}
-}
-
-function closeWin(winName, expiredays) {	
-	setCookie( winName, "done" , expiredays);	
-	var obj = eval( "window." + winName );
-	obj.style.display = "none";
-}
-function closeWinAt00(winName, expiredays) {	
-	setCookieAt00( winName, "done" , expiredays);	
-	var obj = eval( "window." + winName );
-	obj.style.display = "none";
-}
-
-function getCookie( name ) {
-	var nameOfCookie = name + "=";
-	var x = 0;
-	while ( x <= document.cookie.length )
-	{
-		var y = (x+nameOfCookie.length);
-		if ( document.cookie.substring( x, y ) == nameOfCookie ) {
-			if ( (endOfCookie=document.cookie.indexOf( ";", y )) == -1 )
-					endOfCookie = document.cookie.length;
-			return unescape( document.cookie.substring( y, endOfCookie ) );
-		}
-		x = document.cookie.indexOf( " ", x ) + 1;
-		if ( x == 0 )
-			break;
-	}
-	return "";
-}
-
-function setCookie( name, value, expiredays ) {	
-	var todayDate = new Date();	
-	todayDate.setDate( todayDate.getDate() + expiredays );	
-	document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"	
-}
-
-function setCookieAt00( name, value, expiredays ) {	
-	var todayDate = new Date();	
-	 todayDate = new Date(parseInt(todayDate.getTime() / 86400000) * 86400000 + 54000000);
-	if ( todayDate > new Date() )
-	{
-		expiredays = expiredays - 1;
-	}
-	todayDate.setDate( todayDate.getDate() + expiredays );	
-	document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"	
-}
\ No newline at end of file
diff --git a/public/js/resizeTable.js b/public/js/resizeTable.js
new file mode 100644
index 0000000..4721dda
--- /dev/null
+++ b/public/js/resizeTable.js
@@ -0,0 +1,825 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+    typeof define === 'function' && define.amd ? define(['exports'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.validide_resizableTableColumns = {}));
+})(this, (function (exports) { 'use strict';
+
+    var ResizableConstants = /** @class */ (function () {
+        function ResizableConstants() {
+        }
+        ResizableConstants.dataPropertyName = 'validide_rtc_data_object';
+        ResizableConstants.classes = {
+            table: 'rtc-table',
+            wrapper: 'rtc-wrapper',
+            handleContainer: 'rtc-handle-container',
+            handle: 'rtc-handle',
+            tableResizing: 'rtc-table-resizing',
+            columnResizing: 'rtc-column-resizing',
+        };
+        ResizableConstants.attributes = {
+            dataResizable: 'data-rtc-resizable',
+            dataResizableTable: 'data-rtc-resizable-table'
+        };
+        ResizableConstants.data = {
+            resizable: 'rtcResizable',
+            resizableTable: 'rtcResizableTable'
+        };
+        ResizableConstants.events = {
+            pointerDown: ['mousedown', 'touchstart'],
+            pointerMove: ['mousemove', 'touchmove'],
+            pointerUp: ['mouseup', 'touchend'],
+            windowResize: ['resize'],
+            eventResizeStart: 'eventResizeStart.rtc',
+            eventResize: 'eventResize.rtc',
+            eventResizeStop: 'eventResizeStop.rtc'
+        };
+        return ResizableConstants;
+    }());
+
+    var WidthsData = /** @class */ (function () {
+        function WidthsData() {
+            this.column = 0;
+            this.table = 0;
+        }
+        return WidthsData;
+    }());
+    var PointerData = /** @class */ (function () {
+        function PointerData() {
+            this.x = null;
+            this.isDoubleClick = false;
+        }
+        return PointerData;
+    }());
+    var ResizableEventData = /** @class */ (function () {
+        function ResizableEventData(column, dragHandler) {
+            this.pointer = new PointerData();
+            this.originalWidths = new WidthsData();
+            this.newWidths = new WidthsData();
+            this.column = column;
+            this.dragHandler = dragHandler;
+        }
+        return ResizableEventData;
+    }());
+
+    var Utilities = /** @class */ (function () {
+        function Utilities() {
+        }
+        Utilities.kebabCaseToCamelCase = function (str) {
+            return str.replace(Utilities.kebabCaseRegex, function (m) { return m[1].toUpperCase(); });
+        };
+        Utilities.parseStringToType = function (str) {
+            if (str.length == 0 || Utilities.onlyWhiteSpace.test(str))
+                return str;
+            if (Utilities.trueRegex.test(str))
+                return true;
+            if (Utilities.falseRegex.test(str))
+                return false;
+            if (Utilities.notEmptyOrWhiteSpace.test(str)) {
+                var temp = +str;
+                if (!isNaN(temp))
+                    return temp;
+            }
+            return str;
+        };
+        Utilities.regexEscapeRegex = /[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g;
+        Utilities.kebabCaseRegex = /(\-\w)/g;
+        Utilities.trueRegex = /^true$/i;
+        Utilities.falseRegex = /^false$/i;
+        Utilities.onlyWhiteSpace = /^\s$/;
+        Utilities.notEmptyOrWhiteSpace = /\S/;
+        return Utilities;
+    }());
+
+    var UtilitiesDOM = /** @class */ (function () {
+        function UtilitiesDOM() {
+        }
+        UtilitiesDOM.getDataAttributesValues = function (el) {
+            if (!el)
+                return null;
+            var returnValue = {};
+            if (el.dataset) {
+                for (var prop in el.dataset) {
+                    if (el.dataset.hasOwnProperty(prop)) {
+                        returnValue[prop] = Utilities.parseStringToType(el.dataset[prop] || '');
+                    }
+                }
+            }
+            else {
+                for (var i = 0; i < el.attributes.length; i++) {
+                    if (!/^data\-/.test(el.attributes[i].name))
+                        continue;
+                    var name_1 = Utilities.kebabCaseToCamelCase(el.attributes[i].name.replace('data-', ''));
+                    returnValue[name_1] = Utilities.parseStringToType(el.attributes[i].value);
+                }
+            }
+            return returnValue;
+        };
+        return UtilitiesDOM;
+    }());
+
+    var ResizableOptions = /** @class */ (function () {
+        function ResizableOptions(options, element) {
+            if (options === void 0) { options = null; }
+            if (element === void 0) { element = null; }
+            this.resizeFromBody = true;
+            this.minWidth = 40;
+            this.maxWidth = null;
+            this.doubleClickDelay = 500;
+            this.maxInitialWidthHint = null;
+            this.store = null;
+            this.overrideValues(options);
+            this.overrideValuesFromElement(element);
+        }
+        ResizableOptions.prototype.overrideValues = function (options) {
+            if (options === void 0) { options = null; }
+            if (!options)
+                return;
+            for (var prop in options) {
+                if (this.hasOwnProperty(prop)) {
+                    this[prop] = options[prop];
+                }
+            }
+        };
+        ResizableOptions.prototype.overrideValuesFromElement = function (element) {
+            if (element === void 0) { element = null; }
+            if (!element)
+                return;
+            var elementOptions = UtilitiesDOM.getDataAttributesValues(element);
+            this.overrideValues(elementOptions);
+        };
+        return ResizableOptions;
+    }());
+
+    var ResizableTableColumns = /** @class */ (function () {
+        function ResizableTableColumns(table, options) {
+            if (typeof table !== 'object' || table === null || table.toString() !== '[object HTMLTableElement]')
+                throw 'Invalid argument: "table".\nResizableTableColumns requires that the table element is a not null HTMLTableElement object!';
+            if (typeof table[ResizableConstants.dataPropertyName] !== 'undefined')
+                throw "Existing \"".concat(ResizableConstants.dataPropertyName, "\" property.\nTable element already has a '").concat(ResizableConstants.dataPropertyName, "' attached object!");
+            this.id = ResizableTableColumns.getInstanceId();
+            this.table = table;
+            this.options = new ResizableOptions(options, table);
+            this.wrapper = null;
+            this.ownerDocument = table.ownerDocument;
+            this.tableHeaders = [];
+            this.dragHandlesContainer = null;
+            this.originalWidths = [];
+            this.eventData = null;
+            this.lastPointerDown = 0;
+            this.init();
+            this.table[ResizableConstants.dataPropertyName] = this;
+        }
+        ResizableTableColumns.prototype.init = function () {
+            this.validateMarkup();
+            this.createHandlerReferences();
+            this.wrapTable();
+            this.assignTableHeaders();
+            this.storeOriginalWidths();
+            this.setHeaderWidths();
+            this.createDragHandles();
+            this.restoreColumnWidths();
+            this.checkTableWidth();
+            this.syncHandleWidths();
+            this.registerWindowResizeHandler();
+        };
+        ResizableTableColumns.prototype.dispose = function () {
+            this.destroyDragHandles();
+            this.restoreOriginalWidths();
+            this.unwrapTable();
+            this.onPointerDownRef = null;
+            this.onPointerMoveRef = null;
+            this.onPointerUpRef = null;
+            this.table[ResizableConstants.dataPropertyName] = void (0);
+        };
+        ResizableTableColumns.prototype.validateMarkup = function () {
+            var theadCount = 0;
+            var tbodyCount = 0;
+            var thead = null;
+            for (var index = 0; index < this.table.childNodes.length; index++) {
+                var element = this.table.childNodes[index];
+                if (element.nodeName === 'THEAD') {
+                    theadCount++;
+                    thead = element;
+                }
+                else if (element.nodeName === 'TBODY') {
+                    tbodyCount++;
+                }
+            }
+            if (thead === null || theadCount !== 1)
+                throw "Markup validation: thead count.\nResizableTableColumns requires that the table element has one(1) table head element. Current count: ".concat(theadCount);
+            if (tbodyCount !== 1)
+                throw "Markup validation: tbody count.\nResizableTableColumns requires that the table element has one(1) table body element. Current count: ".concat(tbodyCount);
+            var theadRowCount = 0;
+            var firstRow = null;
+            for (var index = 0; index < thead.childNodes.length; index++) {
+                var element = thead.childNodes[index];
+                if (element.nodeName === 'TR') {
+                    theadRowCount++;
+                    if (firstRow === null) {
+                        firstRow = element;
+                    }
+                }
+            }
+            if (firstRow === null || theadRowCount < 1)
+                throw "Markup validation: thead row count.\nResizableTableColumns requires that the table head element has at least one(1) table row element. Current count: ".concat(theadRowCount);
+            var headerCellsCount = 0;
+            var invalidHeaderCellsCount = 0;
+            for (var index = 0; index < firstRow.childNodes.length; index++) {
+                var element = firstRow.childNodes[index];
+                if (element.nodeName === 'TH') {
+                    headerCellsCount++;
+                }
+                else if (element.nodeName === 'TD') {
+                    invalidHeaderCellsCount++;
+                }
+            }
+            if (headerCellsCount < 1)
+                throw "Markup validation: thead first row cells count.\nResizableTableColumns requires that the table head's first row element has at least one(1) table header cell element. Current count: ".concat(headerCellsCount);
+            if (invalidHeaderCellsCount !== 0)
+                throw "Markup validation: thead first row invalid.\nResizableTableColumns requires that the table head's first row element has no(0) table cell(TD) elements. Current count: ".concat(invalidHeaderCellsCount);
+        };
+        ResizableTableColumns.prototype.wrapTable = function () {
+            if (this.wrapper)
+                return;
+            this.wrapper = this.ownerDocument.createElement('div');
+            this.wrapper.classList.add(ResizableConstants.classes.wrapper);
+            var tableOriginalParent = this.table.parentNode;
+            tableOriginalParent.insertBefore(this.wrapper, this.table);
+            tableOriginalParent.removeChild(this.table);
+            this.wrapper.appendChild(this.table);
+            this.table.classList.add(ResizableConstants.classes.table);
+        };
+        ResizableTableColumns.prototype.unwrapTable = function () {
+            this.table.classList.remove(ResizableConstants.classes.table);
+            if (!this.wrapper)
+                return;
+            var tableOriginalParent = this.wrapper.parentNode;
+            tableOriginalParent.insertBefore(this.table, this.wrapper);
+            tableOriginalParent.removeChild(this.wrapper);
+            this.wrapper = null;
+        };
+        ResizableTableColumns.prototype.assignTableHeaders = function () {
+            var tableHeader;
+            var firstTableRow;
+            for (var index = 0; index < this.table.childNodes.length; index++) {
+                var element = this.table.childNodes[index];
+                if (element.nodeName === 'THEAD') {
+                    tableHeader = element;
+                    break;
+                }
+            }
+            if (!tableHeader)
+                return;
+            for (var index = 0; index < tableHeader.childNodes.length; index++) {
+                var element = tableHeader.childNodes[index];
+                if (element.nodeName === 'TR') {
+                    firstTableRow = element;
+                    break;
+                }
+            }
+            if (!firstTableRow)
+                return;
+            for (var index = 0; index < firstTableRow.childNodes.length; index++) {
+                var element = firstTableRow.childNodes[index];
+                if (element.nodeName === 'TH') {
+                    this.tableHeaders.push(element);
+                }
+            }
+        };
+        ResizableTableColumns.prototype.storeOriginalWidths = function () {
+            var _this = this;
+            this.tableHeaders
+                .forEach(function (el) {
+                _this.originalWidths.push({
+                    el: el,
+                    detail: el.style.width
+                });
+            });
+            this.originalWidths.push({
+                el: this.table,
+                detail: this.table.style.width
+            });
+        };
+        ResizableTableColumns.prototype.restoreOriginalWidths = function () {
+            this.originalWidths
+                .forEach(function (itm) {
+                itm.el.style.width = itm.detail;
+            });
+        };
+        ResizableTableColumns.prototype.setHeaderWidths = function () {
+            var _this = this;
+            this.tableHeaders
+                .forEach(function (el) {
+                var width = el.offsetWidth;
+                var constrainedWidth = _this.constrainWidth(el, width);
+                if (typeof _this.options.maxInitialWidthHint === 'number') {
+                    constrainedWidth = Math.min(constrainedWidth, _this.options.maxInitialWidthHint);
+                }
+                _this.updateWidth(el, constrainedWidth, true, false);
+            });
+        };
+        ResizableTableColumns.prototype.constrainWidth = function (el, width) {
+            var result = width;
+            result = Math.max(result, this.options.minWidth || -Infinity);
+            result = Math.min(result, this.options.maxWidth || +Infinity);
+            return result;
+        };
+        ResizableTableColumns.prototype.createDragHandles = function () {
+            var _this = this;
+            var _a;
+            if (this.dragHandlesContainer != null)
+                throw 'Drag handlers already created. Call <destroyDragHandles> if you wish to recreate them';
+            this.dragHandlesContainer = this.ownerDocument.createElement('div');
+            (_a = this.wrapper) === null || _a === void 0 ? void 0 : _a.insertBefore(this.dragHandlesContainer, this.table);
+            this.dragHandlesContainer.classList.add(ResizableConstants.classes.handleContainer);
+            this.getResizableHeaders()
+                .forEach(function () {
+                var _a;
+                var handler = _this.ownerDocument.createElement('div');
+                handler.classList.add(ResizableConstants.classes.handle);
+                (_a = _this.dragHandlesContainer) === null || _a === void 0 ? void 0 : _a.appendChild(handler);
+            });
+            ResizableConstants.events.pointerDown
+                .forEach(function (evt, evtIdx) {
+                var _a;
+                (_a = _this.dragHandlesContainer) === null || _a === void 0 ? void 0 : _a.addEventListener(evt, _this.onPointerDownRef, false);
+            });
+        };
+        ResizableTableColumns.prototype.destroyDragHandles = function () {
+            var _this = this;
+            var _a, _b;
+            if (this.dragHandlesContainer !== null) {
+                ResizableConstants.events.pointerDown
+                    .forEach(function (evt, evtIdx) {
+                    var _a;
+                    (_a = _this.dragHandlesContainer) === null || _a === void 0 ? void 0 : _a.removeEventListener(evt, _this.onPointerDownRef, false);
+                });
+                (_b = (_a = this.dragHandlesContainer) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.removeChild(this.dragHandlesContainer);
+            }
+        };
+        ResizableTableColumns.prototype.getDragHandlers = function () {
+            var nodes = this.dragHandlesContainer == null
+                ? null
+                : this.dragHandlesContainer.querySelectorAll(".".concat(ResizableConstants.classes.handle));
+            return nodes
+                ? Array.prototype.slice.call(nodes).filter(function (el) { return el.nodeName === 'DIV'; })
+                : new Array();
+        };
+        ResizableTableColumns.prototype.restoreColumnWidths = function () {
+            if (!this.options.store)
+                return;
+            var tableId = ResizableTableColumns.generateTableId(this.table);
+            if (tableId.length === 0)
+                return;
+            var data = this.options.store.get(tableId);
+            if (!data)
+                return;
+            this.getResizableHeaders()
+                .forEach(function (el) {
+                var width = data.columns[ResizableTableColumns.generateColumnId(el)];
+                if (typeof width !== 'undefined') {
+                    ResizableTableColumns.setWidth(el, width);
+                }
+            });
+            if (typeof data.table !== 'undefined') {
+                ResizableTableColumns.setWidth(this.table, data.table);
+            }
+        };
+        ResizableTableColumns.prototype.checkTableWidth = function () {
+            var _a;
+            var wrapperWidth = this.wrapper.clientWidth;
+            var tableWidth = this.table.offsetWidth;
+            var difference = wrapperWidth - tableWidth;
+            if (difference <= 0)
+                return;
+            var resizableWidth = 0;
+            var addedWidth = 0;
+            var headersDetails = [];
+            this.tableHeaders
+                .forEach(function (el, idx) {
+                if (el.hasAttribute(ResizableConstants.attributes.dataResizable)) {
+                    var detail = {
+                        el: el,
+                        detail: el.offsetWidth
+                    };
+                    headersDetails.push(detail);
+                    resizableWidth += detail.detail;
+                }
+            });
+            var leftToAdd = 0;
+            var lastResizableCell = null;
+            var currentDetail;
+            while ((currentDetail = headersDetails.shift())) {
+                leftToAdd = difference - addedWidth;
+                lastResizableCell = currentDetail.el;
+                var extraWidth = Math.floor((currentDetail.detail / resizableWidth) * difference);
+                extraWidth = Math.min(extraWidth, leftToAdd);
+                var newWidth = this.updateWidth(currentDetail.el, currentDetail.detail + extraWidth, false, true);
+                addedWidth += (newWidth - currentDetail.detail);
+                if (addedWidth >= difference)
+                    break;
+            }
+            leftToAdd = difference - addedWidth;
+            if (leftToAdd > 0) {
+                var lastCell = ((_a = headersDetails[0]) === null || _a === void 0 ? void 0 : _a.el) || lastResizableCell || this.tableHeaders[this.tableHeaders.length - 1];
+                var lastCellWidth = lastCell.offsetWidth;
+                this.updateWidth(lastCell, lastCellWidth, true, true);
+            }
+            ResizableTableColumns.setWidth(this.table, wrapperWidth);
+        };
+        ResizableTableColumns.prototype.syncHandleWidths = function () {
+            var _this = this;
+            var tableWidth = this.table.clientWidth;
+            ResizableTableColumns.setWidth(this.dragHandlesContainer, tableWidth);
+            this.dragHandlesContainer.style.minWidth = "".concat(tableWidth, "px");
+            var headers = this.getResizableHeaders();
+            this.getDragHandlers()
+                .forEach(function (el, idx) {
+                var height = (_this.options.resizeFromBody ? _this.table : _this.table.tHead).clientHeight;
+                if (idx < headers.length) {
+                    var th = headers[idx];
+                    var left = th.offsetWidth;
+                    left += ResizableTableColumns.getOffset(th).left;
+                    left -= ResizableTableColumns.getOffset(_this.dragHandlesContainer).left;
+                    el.style.left = "".concat(left, "px");
+                    el.style.height = "".concat(height, "px");
+                }
+            });
+        };
+        ResizableTableColumns.prototype.getResizableHeaders = function () {
+            return this.tableHeaders
+                .filter(function (el, idx) {
+                return el.hasAttribute(ResizableConstants.attributes.dataResizable);
+            });
+        };
+        ResizableTableColumns.prototype.handlePointerDown = function (event) {
+            this.handlePointerUp();
+            var target = event ? event.target : null;
+            if (target == null)
+                return;
+            if (target.nodeName !== 'DIV' || !target.classList.contains(ResizableConstants.classes.handle))
+                return;
+            if (typeof event.button === 'number' && event.button !== 0)
+                return; // this is not a left click
+            var dragHandler = target;
+            var gripIndex = this.getDragHandlers().indexOf(dragHandler);
+            var resizableHeaders = this.getResizableHeaders();
+            if (gripIndex >= resizableHeaders.length)
+                return;
+            var millisecondsNow = (new Date()).getTime();
+            var isDoubleClick = (millisecondsNow - this.lastPointerDown) < this.options.doubleClickDelay;
+            var column = resizableHeaders[gripIndex];
+            var columnWidth = column.offsetWidth;
+            var widths = {
+                column: columnWidth,
+                table: this.table.offsetWidth
+            };
+            var eventData = new ResizableEventData(column, dragHandler);
+            eventData.pointer = {
+                x: ResizableTableColumns.getPointerX(event),
+                isDoubleClick: isDoubleClick
+            };
+            eventData.originalWidths = widths;
+            eventData.newWidths = widths;
+            this.detachHandlers(); //make sure we do not have extra handlers
+            this.attachHandlers();
+            this.table.classList.add(ResizableConstants.classes.tableResizing);
+            this.wrapper.classList.add(ResizableConstants.classes.tableResizing);
+            dragHandler.classList.add(ResizableConstants.classes.columnResizing);
+            column.classList.add(ResizableConstants.classes.columnResizing);
+            this.lastPointerDown = millisecondsNow;
+            this.eventData = eventData;
+            var eventToDispatch = new CustomEvent(ResizableConstants.events.eventResizeStart, {
+                detail: {
+                    column: column,
+                    columnWidth: columnWidth,
+                    table: this.table,
+                    tableWidth: this.table.clientWidth
+                }
+            });
+            this.table.dispatchEvent(eventToDispatch);
+            event.preventDefault();
+        };
+        ResizableTableColumns.prototype.handlePointerMove = function (event) {
+            if (!this.eventData || !event)
+                return;
+            var difference = (ResizableTableColumns.getPointerX(event) || 0) - (this.eventData.pointer.x || 0);
+            if (difference === 0) {
+                return;
+            }
+            var tableWidth = this.eventData.originalWidths.table + difference;
+            var columnWidth = this.constrainWidth(this.eventData.column, this.eventData.originalWidths.column + difference);
+            ResizableTableColumns.setWidth(this.table, tableWidth);
+            ResizableTableColumns.setWidth(this.eventData.column, columnWidth);
+            this.eventData.newWidths = {
+                column: columnWidth,
+                table: tableWidth
+            };
+            var eventToDispatch = new CustomEvent(ResizableConstants.events.eventResize, {
+                detail: {
+                    column: this.eventData.column,
+                    columnWidth: columnWidth,
+                    table: this.table,
+                    tableWidth: tableWidth
+                }
+            });
+            this.table.dispatchEvent(eventToDispatch);
+        };
+        ResizableTableColumns.prototype.handlePointerUp = function () {
+            this.detachHandlers();
+            if (!this.eventData)
+                return;
+            if (this.eventData.pointer.isDoubleClick) {
+                this.handleDoubleClick();
+            }
+            this.table.classList.remove(ResizableConstants.classes.tableResizing);
+            this.wrapper.classList.remove(ResizableConstants.classes.tableResizing);
+            this.eventData.dragHandler.classList.remove(ResizableConstants.classes.columnResizing);
+            this.eventData.column.classList.remove(ResizableConstants.classes.columnResizing);
+            this.checkTableWidth();
+            this.syncHandleWidths();
+            this.refreshWrapperStyle();
+            this.saveColumnWidths();
+            var widths = this.eventData.newWidths || this.eventData.originalWidths;
+            var eventToDispatch = new CustomEvent(ResizableConstants.events.eventResizeStop, {
+                detail: {
+                    column: this.eventData.column,
+                    columnWidth: widths.column,
+                    table: this.table,
+                    tableWidth: widths.table
+                }
+            });
+            this.table.dispatchEvent(eventToDispatch);
+            this.eventData = null;
+        };
+        ResizableTableColumns.prototype.handleDoubleClick = function () {
+            if (!this.eventData || !this.eventData.column)
+                return;
+            var column = this.eventData.column;
+            var colIndex = this.tableHeaders.indexOf(column);
+            var maxWidth = 0;
+            var indicesToSkip = [];
+            this.tableHeaders
+                .forEach(function (el, idx) {
+                if (!el.hasAttribute(ResizableConstants.attributes.dataResizable)) {
+                    indicesToSkip.push(idx);
+                }
+            });
+            var span = this.ownerDocument.createElement('span');
+            span.style.position = 'absolute';
+            span.style.left = '-99999px';
+            span.style.top = '-99999px';
+            span.style.visibility = 'hidden';
+            this.ownerDocument.body.appendChild(span);
+            var rows = this.table.querySelectorAll('tr');
+            for (var rowIndex = 0; rowIndex < rows.length; rowIndex++) {
+                var element = rows[rowIndex];
+                var cells = element.querySelectorAll('td, th');
+                var currentIndex = 0;
+                for (var cellIndex = 0; cellIndex < cells.length; cellIndex++) {
+                    var cell = cells[cellIndex];
+                    var colSpan = 1;
+                    if (cell.hasAttribute('colspan')) {
+                        var colSpanString = cell.getAttribute('colspan') || '1';
+                        var parsed = parseInt(colSpanString);
+                        if (!isNaN(parsed)) {
+                            colSpan = parsed;
+                        }
+                        else {
+                            colSpan = 1;
+                        }
+                    }
+                    if (indicesToSkip.indexOf(cellIndex) === -1
+                        && colSpan === 1
+                        && currentIndex === colIndex) {
+                        maxWidth = Math.max(maxWidth, ResizableTableColumns.getTextWidth(cell, span));
+                        break;
+                    }
+                    currentIndex += colSpan;
+                }
+            }
+            this.ownerDocument.body.removeChild(span);
+            var difference = maxWidth - column.offsetWidth;
+            if (difference === 0) {
+                return;
+            }
+            var tableWidth = this.eventData.originalWidths.table + difference;
+            var columnWidth = this.constrainWidth(this.eventData.column, this.eventData.originalWidths.column + difference);
+            ResizableTableColumns.setWidth(this.table, tableWidth);
+            ResizableTableColumns.setWidth(this.eventData.column, columnWidth);
+            this.eventData.newWidths = {
+                column: columnWidth,
+                table: tableWidth,
+            };
+            var eventToDispatch = new CustomEvent(ResizableConstants.events.eventResize, {
+                detail: {
+                    column: this.eventData.column,
+                    columnWidth: columnWidth,
+                    table: this.table,
+                    tableWidth: tableWidth
+                }
+            });
+            this.table.dispatchEvent(eventToDispatch);
+            this.checkTableWidth();
+            this.syncHandleWidths();
+            this.saveColumnWidths();
+        };
+        ResizableTableColumns.prototype.attachHandlers = function () {
+            var _this = this;
+            ResizableConstants.events.pointerMove
+                .forEach(function (evt, evtIdx) {
+                _this.ownerDocument.addEventListener(evt, _this.onPointerMoveRef, false);
+            });
+            ResizableConstants.events.pointerUp
+                .forEach(function (evt, evtIdx) {
+                _this.ownerDocument.addEventListener(evt, _this.onPointerUpRef, false);
+            });
+        };
+        ResizableTableColumns.prototype.detachHandlers = function () {
+            var _this = this;
+            ResizableConstants.events.pointerMove
+                .forEach(function (evt, evtIdx) {
+                _this.ownerDocument.removeEventListener(evt, _this.onPointerMoveRef, false);
+            });
+            ResizableConstants.events.pointerUp
+                .forEach(function (evt, evtIdx) {
+                _this.ownerDocument.removeEventListener(evt, _this.onPointerUpRef, false);
+            });
+        };
+        ResizableTableColumns.prototype.refreshWrapperStyle = function () {
+            if (this.wrapper == null)
+                return;
+            var original = this.wrapper.style.overflowX;
+            this.wrapper.style.overflowX = 'hidden';
+            this.wrapper.style.overflowX = original;
+        };
+        ResizableTableColumns.prototype.saveColumnWidths = function () {
+            if (!this.options.store)
+                return;
+            var tableId = ResizableTableColumns.generateTableId(this.table);
+            if (tableId.length === 0)
+                return;
+            var data = {
+                table: this.table.offsetWidth,
+                columns: {}
+            };
+            this.getResizableHeaders()
+                .forEach(function (el) {
+                data.columns[ResizableTableColumns.generateColumnId(el)] = el.offsetWidth;
+            });
+            this.options.store.set(tableId, data);
+        };
+        ResizableTableColumns.prototype.createHandlerReferences = function () {
+            var _this = this;
+            if (!this.onPointerDownRef) {
+                this.onPointerDownRef = ResizableTableColumns.debounce(function (evt) {
+                    _this.handlePointerDown(evt);
+                }, 100, true);
+            }
+            if (!this.onPointerMoveRef) {
+                this.onPointerMoveRef = ResizableTableColumns.debounce(function (evt) {
+                    _this.handlePointerMove(evt);
+                }, 5, false);
+            }
+            if (!this.onPointerUpRef) {
+                this.onPointerUpRef = ResizableTableColumns.debounce(function (evt) {
+                    _this.handlePointerUp();
+                }, 100, true);
+            }
+        };
+        ResizableTableColumns.prototype.registerWindowResizeHandler = function () {
+            var win = this.ownerDocument.defaultView;
+            if (ResizableTableColumns.windowResizeHandlerRef)
+                return;
+            ResizableTableColumns.windowResizeHandlerRef = ResizableTableColumns.debounce(ResizableTableColumns.onWindowResize, 50, false);
+            ResizableConstants.events.windowResize
+                .forEach(function (evt, idx) {
+                win === null || win === void 0 ? void 0 : win.addEventListener(evt, ResizableTableColumns.windowResizeHandlerRef, false);
+            });
+        };
+        ResizableTableColumns.prototype.handleWindowResize = function () {
+            this.checkTableWidth();
+            this.syncHandleWidths();
+            this.saveColumnWidths();
+        };
+        ResizableTableColumns.prototype.updateWidth = function (cell, suggestedWidth, skipConstrainCheck, skipTableResize) {
+            var originalCellWidth = cell.offsetWidth;
+            var columnWidth = skipConstrainCheck
+                ? suggestedWidth
+                : this.constrainWidth(cell, suggestedWidth);
+            ResizableTableColumns.setWidth(cell, columnWidth);
+            if (!skipTableResize) {
+                var difference = columnWidth - originalCellWidth;
+                var tableWidth = this.table.offsetWidth + difference;
+                ResizableTableColumns.setWidth(this.table, tableWidth);
+            }
+            return columnWidth;
+        };
+        ResizableTableColumns.onWindowResize = function (event) {
+            var win = event ? event.target : null;
+            if (win == null)
+                return;
+            var tables = win.document.querySelectorAll(".".concat(ResizableConstants.classes.table));
+            for (var index = 0; index < tables.length; index++) {
+                var table = tables[index];
+                if (typeof table[ResizableConstants.dataPropertyName] !== 'object')
+                    continue;
+                table[ResizableConstants.dataPropertyName].handleWindowResize();
+            }
+        };
+        ResizableTableColumns.generateColumnId = function (el) {
+            var columnId = (el.getAttribute(ResizableConstants.attributes.dataResizable) || '')
+                .trim()
+                .replace(/\./g, '_');
+            return columnId;
+        };
+        ResizableTableColumns.generateTableId = function (table) {
+            var tableId = (table.getAttribute(ResizableConstants.attributes.dataResizableTable) || '')
+                .trim()
+                .replace(/\./g, '_');
+            return tableId.length
+                ? "rtc/".concat(tableId)
+                : tableId;
+        };
+        ResizableTableColumns.setWidth = function (element, width) {
+            var strWidth = width.toFixed(2);
+            strWidth = width > 0 ? strWidth : '0';
+            element.style.width = "".concat(strWidth, "px");
+        };
+        ResizableTableColumns.getInstanceId = function () {
+            return ResizableTableColumns.instancesCount++;
+        };
+        ResizableTableColumns.getPointerX = function (event) {
+            if (event.type.indexOf('touch') === 0) {
+                var tEvent = event;
+                if (tEvent.touches && tEvent.touches.length) {
+                    return tEvent.touches[0].pageX;
+                }
+                if (tEvent.changedTouches && tEvent.changedTouches.length) {
+                    return tEvent.changedTouches[0].pageX;
+                }
+            }
+            return event.pageX;
+        };
+        ResizableTableColumns.getTextWidth = function (contentElement, measurementElement) {
+            var _a, _b;
+            if (!contentElement || !measurementElement)
+                return 0;
+            var text = ((_a = contentElement.textContent) === null || _a === void 0 ? void 0 : _a.trim().replace(/\s/g, '&nbsp;')) + '&nbsp;'; //add extra space to ensure we are not add the `...`
+            var styles = (_b = contentElement.ownerDocument.defaultView) === null || _b === void 0 ? void 0 : _b.getComputedStyle(contentElement);
+            ['fontFamily', 'fontSize', 'fontWeight', 'padding', 'border', 'boxSizing']
+                .forEach(function (prop) {
+                measurementElement.style[prop] = styles[prop];
+            });
+            measurementElement.innerHTML = text;
+            return measurementElement.offsetWidth;
+        };
+        ResizableTableColumns.getOffset = function (el) {
+            if (!el)
+                return { top: 0, left: 0 };
+            var rect = el.getBoundingClientRect();
+            return {
+                top: rect.top + el.ownerDocument.body.scrollTop,
+                left: rect.left + el.ownerDocument.body.scrollLeft
+            };
+        };
+        ResizableTableColumns.instancesCount = 0;
+        ResizableTableColumns.windowResizeHandlerRef = null;
+        ResizableTableColumns.debounce = function (func, wait, immediate) {
+            var timeout = null;
+            var debounced = function () {
+                var args = [];
+                for (var _i = 0; _i < arguments.length; _i++) {
+                    args[_i] = arguments[_i];
+                }
+                var later = function () {
+                    timeout = null;
+                    if (!immediate) {
+                        func.apply(void 0, args);
+                    }
+                };
+                var callNow = immediate && !timeout;
+                if (timeout) {
+                    clearTimeout(timeout);
+                }
+                timeout = setTimeout(later, wait);
+                if (callNow) {
+                    func.apply(void 0, args);
+                }
+            };
+            return debounced;
+        };
+        return ResizableTableColumns;
+    }());
+
+    exports.PointerData = PointerData;
+    exports.ResizableConstants = ResizableConstants;
+    exports.ResizableEventData = ResizableEventData;
+    exports.ResizableOptions = ResizableOptions;
+    exports.ResizableTableColumns = ResizableTableColumns;
+    exports.Utilities = Utilities;
+    exports.UtilitiesDOM = UtilitiesDOM;
+    exports.WidthsData = WidthsData;
+
+}));
+//# sourceMappingURL=index.js.map
\ No newline at end of file