<style>
.table {
  border-collapse: collapse;
  width: 100%;
}
 
.table th,
.table td {
  padding: 0.5rem;
  border: 1px solid #989696;
}
 
.table th {
  position: relative;
   cursor: grab;
      user-select: none;
}  
   .table th:active {
      cursor: grabbing;
    }
 
.resizer {
  position: absolute;
  top: 0;
  right: 0;
  width: 5px;
  cursor: col-resize;
  user-select: none;
}
 
.resizer:hover,
.resizing {
  border-right: 2px solid blue;
}
 
.dragging {
  background-color: #f0f0f0;
}
</style>

  <!-- 게시판 목록 테이블에  id="resizeMe"  class="resizable-table table table-hover" 
             id="header-row"  추가하기 -->
    <div class="tbl_head01 tbl_wrap">
        <table  id="resizeMe"  class="resizable-table table table-hover" >
        <caption><?php echo $board['bo_subject'] ?> 목록</caption>
        <thead>
        <tr  id="header-row">

<noscript>
<p>자바스크립트를 사용하지 않는 경우<br>별도의 확인 절차 없이 바로 선택삭제 처리하므로 주의하시기 바랍니다.</p>
</noscript>  
<?php } ?>  <!--  여기쯤에 아래내용 붙여넣기 하면 됩니다. -->
<!--  TD간격조정 시작 -->
<script src="https://rawgit.com/RickStrahl/jquery-resizable/master/src/jquery-resizable.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-sortablejs@latest/jquery-sortable.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.10.27/interact.js"></script>
<script>
 
document.addEventListener('DOMContentLoaded', function () {
    console.log('bbb');
  const makeTableResizableAndSortable = function (table) {
 
    const tableBody = table.querySelector('tbody');
 
    // Make rows sortable
    const rowsSortable = new Sortable(tableBody, {
      animation: 150,
    });
 
    // Make columns and table header cells draggable using interact.js
    const headers = table.querySelectorAll('th');
    interact(headers).draggable({
      // Enable both left and right edges for dragging
      edges: { left: true, right: true, bottom: false, top: false },
      listeners: {
        start(event) {
          const target = event.target;
          target.classList.add('dragging');
        },
        move(event) {
          const target = event.target;
          const dx = event.dx;
          target.style.transform = `translate(${dx}px)`;
        },
        end(event) {
          const target = event.target;
          target.style.transform = '';
          target.classList.remove('dragging');
        },
      },
    }).resizable({
      // Enable right edge for resizing
      edges: { right: true },
      restrictEdges: {
        outer: 'parent',
      },
      restrictSize: {
        min: { width: 50 },
      },
      listeners: {
        move(event) {
          const target = event.target;
          const width = parseFloat(target.style.width) || 0;
          target.style.width = width + event.dx + 'px';
        },
      },
    });
  };
 
  const tables = document.querySelectorAll('.resizable-table');
  tables.forEach(function (table) {
    makeTableResizableAndSortable(table);
  });
});

 
document.addEventListener('DOMContentLoaded', function () {
const createResizableTable = function (table) {
const cols = table.querySelectorAll('th');
[].forEach.call(cols, function (col) {
// Add a resizer element to the column
const resizer = document.createElement('div');
resizer.classList.add('resizer');

 
// Set the height
resizer.style.height = `${table.offsetHeight}px`;

 
col.appendChild(resizer);

 
createResizableColumn(col, resizer);
});
};

 
const createResizableColumn = function (col, resizer) {
let x = 0;
let w = 0;

 
const mouseDownHandler = function (e) {
x = e.clientX;

 
const styles = window.getComputedStyle(col);
w = parseInt(styles.width, 10);

 
document.addEventListener('mousemove', mouseMoveHandler);
document.addEventListener('mouseup', mouseUpHandler);

 
resizer.classList.add('resizing');
};

 
const mouseMoveHandler = function (e) {
const dx = e.clientX - x;
col.style.width = `${w + dx}px`;
};

 
const mouseUpHandler = function () {
resizer.classList.remove('resizing');
document.removeEventListener('mousemove', mouseMoveHandler);
document.removeEventListener('mouseup', mouseUpHandler);
};
 
resizer.addEventListener('mousedown', mouseDownHandler);
};
 
createResizableTable(document.getElementById('resizeMe'));
});
 
</script>
<!--  TD간격조정 마침 -->