JSFiddle - React, Tailwind, and code Playground

by fekkyDev s

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<table id="table-css-border-1" class="ui-widget-content">
    <tr>
      <th>header1</th>
      <th>header2</th>
      <th>header3</th>
      <th>header4</th>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>

CSS

#table-css-border-1 {
  width: 100%;
  border-style: outset;
  border-width: 1px;
  border-spacing: 2px;
}

#table-css-border-1 td,
#table-css-border-1 th {
  border-style: inset;
  border-width: 1px;
  min-width: 50px!important;
}

JavaScript

var table = $("#table-css-border-1"), tw = table.width();
table.find("td").each(function() {
	var tr = $(this), c = 0;
  $(this).each(function() {
  	var te = $(this), ew = ((te.width() * 100) / tw);
  	te.css("width", ew + "%").addClass("resizable column-" + (++c));
    te.data("cc", ".column-" + c);
    te.data("nc", ".column-" + (c + 1));
  });
	tr.find("td:last-child, th:last-child").removeClass("resizable");
});

var r = $("#table-css-border-1 .resizable"), mw = 50;
r.resizable({
  handles: 'e',
  maxWidth: mw,
  start: function(e, ui) {
  	var td = $(ui.element);
    var nd = td.next() || td.previous();
    r.resizable( "option", "maxWidth", gw(td) + gw(nd) - mw);
    table.find(td.data("cc")).css("width", "");
    table.find(td.data("nc")).css("width", "");
  },
  stop: function(e, ui) {
  	var td = $(ui.element);
    var nd = td.next() || td.previous();
    table.find(td.data("cc")).css("width", (((td.width()+5) * 100)/tw)+"%");
    table.find(td.data("nc")).css("width", ((nd.width() * 100)/tw)+"%");
  }
});
function gw(e) {
	return parseFloat(e.css("width").replace(/px/g, ''));
}