php (35) javascript (31) phpjavascript (30) jquery (23) html (20) mysql (14) database (9) codeigniter (4) json (4) bar chart (2) calendar (2) column chart (2) framework (2) google maps (2) query (2) tables (2) url (2) dropdown (1)

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. 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

  2. Phenomenal Blog! I may want to thank for the endeavors you have produced in composing this post. I'm trusting exactly the same best work from you down the road too.

  3. Thank you so much for sharing these amazing tips. Digital Signature Certificate

  4. This post is really insightful; it has helped me understand so many things. Digital Signature Certificate

  5. I really enjoyed reading your blog, you have lots of great content. Please visit here:
    Private detective agency in Mumbai

  6. This post is really insightful; it has helped me understand so many things. Class 2 Digital Signature Certificate


More Posts