Subscribe For Free

Tuesday, February 20, 2018

Resizeable table using javascript and jquery

<link rel="stylesheet" href="//">
<script src=""></script>
<script src=""></script>
<link rel="stylesheet" href=""
<style type="text/css">
 body {
  font-family: Arial;
  font-size: 10pt;
table#demo-table th {
  background-color: red;
  color: #fff;
  table#demo-table th,
  table#demo-table td {
    white-space: nowrap;
    padding: 13px 10px;
  table.cellpadding-0 td {
  padding: 0;
 table.cellspacing-0 {
  border-spacing: 0;
  border-collapse: collapse;
table.bordered th,
table.bordered td {
border: 1px solid #ccc;
border-right: none;
text-align: center;
table.bordered th:last,
table.bordered td:last {
border-right: 1px solid #ccc;
$(function() {
var thHeight = $("table#demo-table th:first").height();
$("table#demo-table th").resizable({
    handles: "e",
    minHeight: thHeight,
    maxHeight: thHeight,
    minWidth: 40,
    resize: function (event, ui) {
    var sizerID = "#" + $("id") + "-sizer";
<table id="demo-table" class="bordered cellpadding-0 cellspacing-0">
        <th id='column-header-1'>S.No<div id='column-header-1-sizer'></div></th>
        <th id='column-header-2'>Subject<div id='column-header-2-sizer'></div></th>
        <th id='column-header-3'>Total Marks<div id='column-header-3-sizer'></div></th>
        <th id='column-header-4'>Gain<div id='column-header-4-sizer'></div></th>
        <th id='column-header-5'>Rank<div id='column-header-5-sizer'></div></th>



1 comment:

  1. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from Javascript Training in Chennai . or learn thru Javascript Training in Chennai. Nowadays JavaScript has tons of job opportunities on various vertical industry. JavaScript Training in Chennai


click it