TD TR Resize

by fekkyDev s

HTML

<table>
     <tr>
    <td>January</td>
    <td>$100</td>
    <td rowspan="2">$50</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
   
</table>

CSS

table {
    border: 1px solid #000;
    height: 100%;
    width:100%
}
td {
    border: 1px solid #000
}
td, th {
    border: 1px solid #ccc;
}
table, td, th {
    /*table-layout:fixed;*/
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

JavaScript

$("td").resizable({
    handles: 's, e',
    start:function( event, ui){
    
     $('td').css('width', '');
      $(this).siblings().css('width', '');
    },
    stop: function( event, ui ) {
  //  alert('s')
   // $('td').css('width', ui.size.width / 100+'%');
   //$(this).css('width', '');
      //  $(this).siblings().css('height', '');
    },
    resize: function (event, ui) {
    //ui.size.height = Math.round( ui.size.height / 100 ) * 100;
    //ui.size.width = Math.round( ui.size.width / 100 ) * 100;
        console.log(ui.size.height,$(this).siblings());
        $(this).siblings().css('width', ui.size.width);
        $(this).siblings().height(ui.size.height);
    }
});