Home » Jquery » javascript – Table columns (headers) width resizing and table width 100% issues in CSS jQuery

javascript – Table columns (headers) width resizing and table width 100% issues in CSS jQuery

Posted by: admin February 24, 2020 Leave a comment

Questions:

I have a responsive scrollable HTML table on which I am trying to add a feature of columns resizing (width change) on drag. My code though does work fine except some CSS/jQuery issues which are explained below:

  • If I DO apply 100% width to table and table columns are less, then columns don’t resize properly – they expand on both sides. (Refer to DEMO 1)
  • If I DON’T apply 100% width to table and table columns are enough, then columns don’t even resize at all. (Refer to DEMO 2)
  • The alert box doesn’t show the correct resized width of table header.

Since my table is dynamic – don’t know in advance how many columns will be in the table, so CAN’T apply or CAN’T remove table width.

DEMO 1

When we have less columns

$(document).ready(function(){
  var pressed = false;
  var tb_header;
  var startX, startWidth;
  var th_id, th_width;

  $(document).on("mousedown", ".column_heading_resize", function(e){
    tb_header = $(this).parents("th");
    pressed = true;
    startX = e.pageX;
    startWidth = $(tb_header).width();
    $(tb_header).addClass("resizing");
    $(tb_header).addClass("noSelect");
  });

  $(document).mousemove(function(e){
    if(pressed)
    {
      $(tb_header).width(startWidth + (e.pageX - startX));
    }
  });

  $(document).mouseup(function(){
    if(pressed)
    {
      $(tb_header).removeClass("resizing");
      $(tb_header).removeClass("noSelect");
      pressed = false;

      th_id = $(tb_header).data("id");
      th_width = $(tb_header).width();
      var dataString = "th_id="+th_id+"&th_width="+th_width;

      alert("th id = " + th_id + "\ndata width = " + th_width);
    }
  });
});
#tb_wrapper {
  border:1px solid #cccccc;
  max-width:960px;
  margin:50px auto;
  padding:10px;
}

#tb_responsive {
  overflow-x:auto;
  overflow-y:hidden;
}

.tb_records {
  border-collapse:collapse;
  text-align:left;
  width:100%;
  table-layout:fixed;
}

.tb_records th {
  font-weight:bold;
  position:relative;
  min-width:50px;
  max-width:350px;
  background-color:#4c4c4c;
  color:#ffffff;
}

.tb_records th, .tb_records td {
  padding:10px;
  border:1px solid #000000;
  font-size:15px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.tb_records tr:nth-child(even) {
  background-color:#F2F2F2;
}

.column_heading_resize {
  cursor:col-resize;
  position:absolute;
  top:0;
  bottom:0;
  right:0px;
  width:3px;
}

.noSelect {
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}
<link rel="stylesheet" type="text/css" href="https://meyerweb.com/eric/tools/css/reset/reset.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div id="tb_wrapper">
  <div id="tb_responsive">
    <table class="tb_records">
      <thead>
        <tr>
          <th style="width:75px;">Row ID</th>
          <th data-id="1" data-width="100" style='width:100px;'>Column 1<span class='column_heading_resize'>&nbsp;</span></th>
          <th data-id="2" data-width="100" style='width:100px;'>Column 2<span class='column_heading_resize'>&nbsp;</span></th>
          <th data-id="3" data-width="100" style='width:100px;'>Column 3<span class='column_heading_resize'>&nbsp;</span></th>
        </tr>
      </thead>
      <tbody>
        <tr>
        <td>1</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        </tr>
        <tr>
        <td>2</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        </tr>
        <tr>
        <td>3</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        </tr>
        <tr>
        <td>4</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        </tr>
        <tr>
        <td>5</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        </tr>
        <tr>
        <td>6</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        </tr>
        <tr>
        <td>7</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        </tr>
        <tr>
        <td>8</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        </tr>
        <tr>
        <td>9</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        </tr>
        <tr>
        <td>10</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

DEMO 2

When we have more columns

$(document).ready(function(){
  var pressed = false;
  var tb_header;
  var startX, startWidth;
  var th_id, th_width;

  $(document).on("mousedown", ".column_heading_resize", function(e){
    tb_header = $(this).parents("th");
    pressed = true;
    startX = e.pageX;
    startWidth = $(tb_header).width();
    $(tb_header).addClass("resizing");
    $(tb_header).addClass("noSelect");
  });

  $(document).mousemove(function(e){
    if(pressed)
    {
      $(tb_header).width(startWidth + (e.pageX - startX));
    }
  });

  $(document).mouseup(function(){
    if(pressed)
    {
      $(tb_header).removeClass("resizing");
      $(tb_header).removeClass("noSelect");
      pressed = false;

      th_id = $(tb_header).data("id");
      th_width = $(tb_header).width();
      var dataString = "th_id="+th_id+"&th_width="+th_width;

      alert("th id = " + th_id + "\ndata width = " + th_width);
    }
  });
});
#tb_wrapper {
  border:1px solid #cccccc;
  max-width:960px;
  margin:50px auto;
  padding:10px;
}

#tb_responsive {
  overflow-x:auto;
  overflow-y:hidden;
}

.tb_records {
  border-collapse:collapse;
  text-align:left;
  table-layout:fixed;
}

.tb_records th {
  font-weight:bold;
  position:relative;
  min-width:50px;
  max-width:350px;
  background-color:#4c4c4c;
  color:#ffffff;
}

.tb_records th, .tb_records td {
  padding:10px;
  border:1px solid #000000;
  font-size:15px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.tb_records tr:nth-child(even) {
  background-color:#F2F2F2;
}

.column_heading_resize {
  cursor:col-resize;
  position:absolute;
  top:0;
  bottom:0;
  right:0px;
  width:3px;
}

.noSelect {
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

What should be the perfect solutions to my above issues? Any idea?

How to&Answer: