souri-t/gist:270dcc20a815a43440e39bde808d4cf6

## gistfile1.txt
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>可変サイズのテーブル</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
      th.resize {
        position: relative;
        cursor: ew-resize;
        user-select: none;
      }
      th.resize::after {
        content: "";
        position: absolute;
        top: 0;
        right: -5px;
        bottom: 0;
        width: 10px;
        z-index: 1;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <table class="table">
        <thead>
          <tr>
            <th class="resize" scope="col">列1</th>
            <th class="resize" scope="col">列2</th>
            <th class="resize" scope="col">列3</th>
            <th class="resize" scope="col">列4</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>セル1</td>
            <td>セル2</td>
            <td>セル3</td>
            <td>セル4</td>
          </tr>
          <tr>
            <td>セル5</td>
            <td>セル6</td>
            <td>セル7</td>
            <td>セル8</td>
          </tr>
        </tbody>
      </table>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
      $(function() {
        var resizeHandle = null;
        var originalWidth = null;
        $('th.resize').mousedown(function(e) {
          resizeHandle = $(this);
          originalWidth = resizeHandle.width();
          $(document).mousemove(function(e) {
            resizeHandle.width(originalWidth + e.pageX - resizeHandle.offset().left);
          });
          e.preventDefault();
        });
        $(document).mouseup(function(e) {
          if (resizeHandle) {
            $(document).off('mousemove');
            resizeHandle = null;
          }
        });
      });
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>可変サイズのテーブル</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
	<style>
	th.resize {
	position: relative;
	cursor: ew-resize;
	user-select: none;
	}
	th.resize::after {
	content: "";
	position: absolute;
	top: 0;
	right: -5px;
	bottom: 0;
	width: 10px;
	z-index: 1;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<table class="table">
	<thead>
	<tr>
	<th class="resize" scope="col">列1</th>
	<th class="resize" scope="col">列2</th>
	<th class="resize" scope="col">列3</th>
	<th class="resize" scope="col">列4</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td>セル1</td>
	<td>セル2</td>
	<td>セル3</td>
	<td>セル4</td>
	</tr>
	<tr>
	<td>セル5</td>
	<td>セル6</td>
	<td>セル7</td>
	<td>セル8</td>
	</tr>
	</tbody>
	</table>
	</div>
	<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
	<script>
	$(function() {
	var resizeHandle = null;
	var originalWidth = null;
	$('th.resize').mousedown(function(e) {
	resizeHandle = $(this);
	originalWidth = resizeHandle.width();
	$(document).mousemove(function(e) {
	resizeHandle.width(originalWidth + e.pageX - resizeHandle.offset().left);
	});
	e.preventDefault();
	});
	$(document).mouseup(function(e) {
	if (resizeHandle) {
	$(document).off('mousemove');
	resizeHandle = null;
	}
	});
	});
	</script>
	</body>
	</html>