JSFiddle - React, Tailwind, and code Playground

by Sahil Kashyap

HTML

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

	
	<table id="" class="table table-striped table-bordered table-resizable">
                                                <thead>
                                                    <tr>
                                                        <th scope="col"><a href="/Livensouth/nsouth/invoices/add/e4da3b7fbbce2345d7772b0674a318d5?sort=Date&amp;direction=asc">Date</a></th>
                                                        <th scope="col"><a href="/Livensouth/nsouth/invoices/add/e4da3b7fbbce2345d7772b0674a318d5?sort=Particulars&amp;direction=asc">Particulars</a></th>
                                                        <th scope="col"><a href="/Livensouth/nsouth/invoices/add/e4da3b7fbbce2345d7772b0674a318d5?sort=In+Pocket+Expenses+in+INR&amp;direction=asc">In Pocket Expenses In INR</a></th>
                                                        <th scope="col"><a href="/Livensouth/nsouth/invoices/add/e4da3b7fbbce2345d7772b0674a318d5?sort=Out+Of+Pocket+Expanse+in+INR&amp;direction=asc">Out Of Pocket Expanse In INR</a></th>
                                                        <th scope="col"><a href="/Livensouth/nsouth/invoices/add/e4da3b7fbbce2345d7772b0674a318d5?sort=Total&amp;direction=asc">Total</a></th>


                                                    </tr>
                                                </thead>
                                                <tbody>

                                                                                                                <tr>

                                                                <td > 09-01-2019 </td>

                                                                <td > 


                      ...

CSS

.table-resizable.resizing, .table-resizable th::before {
  cursor: col-resize;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.table-resizable th {
  position: relative;
}
.table-resizable th::before {
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: 1em;
}
.table-resizable th:last-of-type::before {
  display: none;
}
.table-resizable td {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

JavaScript

$(function() {
	var startX,
		 startWidth,
		 $handle,
		 $table,
		 pressed = false;
	
	$(document).on({
		mousemove: function(event) {
			if (pressed) {
				$handle.width(startWidth + (event.pageX - startX));
			}
		},
		mouseup: function() {
			if (pressed) {
				$table.removeClass('resizing');
				pressed = false;
			}
		}
	}).on('mousedown', '.table-resizable th', function(event) {
		$handle = $(this);
		pressed = true;
		startX = event.pageX;
		startWidth = $handle.width();
		
		$table = $handle.closest('.table-resizable').addClass('resizing');
	}).on('dblclick', '.table-resizable thead', function() {
		// Reset column sizes on double click
		$(this).find('th[style]').css('width', '');
	});
});