title: Make table column dragable (sort) in bootstrap
body: <p>I designed a table in bootstrap and a list of column name. I want when I drag any column name in list or table column it will drag both.(table column and list li)</p>
  
  <p>Check this link table column is dragable. When you drag table column it runs.</p>
  
  <p>Go to your mouse table column name and drag.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
  
    $('.table').dragtable();
    $('.list').dragtable();
  });
  
  
  (function($) {
    $.widget("akottr.dragtable", {
      options: {
        revert: false, // smooth revert
        dragHandle: '.table-handle', // handle for moving cols, if not exists the whole 'th' is the handle
        maxMovingRows: 40, // 1 -&gt; only header. 40 row should be enough, the rest is usually not in the viewport
        excludeFooter: false, // excludes the footer row(s) while moving other columns. Make sense if there is a footer with a colspan. */
        onlyHeaderThreshold: 100, // TODO:  not implemented yet, switch automatically between entire col moving / only header moving
        dragaccept: null, // draggable cols -&gt; default all
        persistState: null, // url or function -&gt; plug in your custom persistState function right here. function call is persistState(originalTable)
        restoreState: null, // JSON-Object or function:  some kind of experimental aka Quick-Hack TODO: do it better
        exact: true, // removes pixels, so that the overlay table width fits exactly the original table width
        clickDelay: 10, // ms to wait before rendering sortable list and delegating click event
        containment: null, // @see http://api.jqueryui.com/sortable/#option-containment, use it if you want to move in 2 dimesnions (together with axis: null)
        cursor: 'move', // @see http://api.jqueryui.com/sortable/#option-cursor
        cursorAt: false, // @see http://api.jqueryui.com/sortable/#option-cursorAt
        distance: 0, // @see http://api.jqueryui.com/sortable/#option-distance, for immediate feedback use "0"
        tolerance: 'pointer', // @see http://api.jqueryui.com/sortable/#option-tolerance
        axis: 'x', // @see http://api.jqueryui.com/sortable/#option-axis, Only vertical moving is allowed. Use 'x' or null. Use this in conjunction with the 'containment' setting
        beforeStart: $.noop, // returning FALSE will stop the execution chain.
        beforeMoving: $.noop,
        beforeReorganize: $.noop,
        beforeStop: $.noop
      },
      originalTable: {
        el: null,
        selectedHandle: null,
        sortOrder: null,
        startIndex: 0,
        endIndex: 0
      },
      sortableTable: {
        el: $(),
        selectedHandle: $(),
        movingRow: $()
      },
      persistState: function() {
        var _this = this;
        this.originalTable.el.find('th').each(function(i) {
          if (this.id !== '') {
            _this.originalTable.sortOrder[this.id] = i;
          }
        });
        $.ajax({
          url: this.options.persistState,
          data: this.originalTable.sortOrder
        });
      },
      /*
       * persistObj looks like
       * {'id1':'2','id3':'3','id2':'1'}
       * table looks like
       * |   id2  |   id1   |   id3   |
       */
      _restoreState: function(persistObj) {
        for (var n in persistObj) {
          this.originalTable.startIndex = $('#' + n).closest('th').prevAll().size() + 1;
          this.originalTable.endIndex = parseInt(persistObj[n] + 1, 10);
          this._bubbleCols();
        }
      },
      // bubble the moved col left or right
      _bubbleCols: function() {
        var i, j, col1, col2;
        var from = this.originalTable.startIndex;
        var to = this.originalTable.endIndex;
        /* Find children thead and tbody.
         * Only to process the immediate tr-children. Bugfix for inner tables
         */
        var thtb = this.originalTable.el.children();
        if (this.options.excludeFooter) {
          thtb = thtb.not('tfoot');
        }
        if (from &lt; to) {
          for (i = from; i &lt; to; i++) {
            col1 = thtb.find('&gt; tr &gt; td:nth-child(' + i + ')')
              .add(thtb.find('&gt; tr &gt; th:nth-child(' + i + ')'));
            col2 = thtb.find('&gt; tr &gt; td:nth-child(' + (i + 1) + ')')
              .add(thtb.find('&gt; tr &gt; th:nth-child(' + (i + 1) + ')'));
            for (j = 0; j &lt; col1.length; j++) {
              swapNodes(col1[j], col2[j]);
            }
          }
        } else {
          for (i = from; i &gt; to; i--) {
            col1 = thtb.find('&gt; tr &gt; td:nth-child(' + i + ')')
              .add(thtb.find('&gt; tr &gt; th:nth-child(' + i + ')'));
            col2 = thtb.find('&gt; tr &gt; td:nth-child(' + (i - 1) + ')')
              .add(thtb.find('&gt; tr &gt; th:nth-child(' + (i - 1) + ')'));
            for (j = 0; j &lt; col1.length; j++) {
              swapNodes(col1[j], col2[j]);
            }
          }
        }
      },
      _rearrangeTableBackroundProcessing: function() {
        var _this = this;
        return function() {
          _this._bubbleCols();
          _this.options.beforeStop(this.originalTable);
          _this.sortableTable.el.remove();
          restoreTextSelection();
          // persist state if necessary
          if (_this.options.persistState !== null) {
            $.isFunction(_this.options.persistState) ? _this.options.persistState(_this.originalTable) : _this.persistState();
          }
        };
      },
      _rearrangeTable: function() {
        var _this = this;
        return function() {
          // remove handler-class -&gt; handler is now finished
          _this.originalTable.selectedHandle.removeClass('dragtable-handle-selected');
          // add disabled class -&gt; reorgorganisation starts soon
          _this.sortableTable.el.sortable("disable");
          _this.sortableTable.el.addClass('dragtable-disabled');
          _this.options.beforeReorganize(_this.originalTable, _this.sortableTable);
          // do reorganisation asynchronous
          // for chrome a little bit more than 1 ms because we want to force a rerender
          _this.originalTable.endIndex = _this.sortableTable.movingRow.prevAll().size() + 1;
          setTimeout(_this._rearrangeTableBackroundProcessing(), 50);
        };
      },
      /*
       * Disrupts the table. The original table stays the same.
       * But on a layer above the original table we are constructing a list (ul &gt; li)
       * each li with a separate table representig a single col of the original table.
       */
      _generateSortable: function(e) {
        !e.cancelBubble &amp;&amp; (e.cancelBubble = true);
        var _this = this;
        // table attributes
        var attrs = this.originalTable.el[0].attributes;
        var attrsString = '';
        for (var i = 0; i &lt; attrs.length; i++) {
          if (attrs[i].nodeValue &amp;&amp; attrs[i].nodeName != 'id' &amp;&amp; attrs[i].nodeName != 'width') {
            attrsString += attrs[i].nodeName + '="' + attrs[i].nodeValue + '" ';
          }
        }
  
        // row attributes
        var rowAttrsArr = [];
        //compute height, special handling for ie needed :-(
        var heightArr = [];
        this.originalTable.el.find('tr').slice(0, this.options.maxMovingRows).each(function(i, v) {
          // row attributes
          var attrs = this.attributes;
          var attrsString = "";
          for (var j = 0; j &lt; attrs.length; j++) {
            if (attrs[j].nodeValue &amp;&amp; attrs[j].nodeName != 'id') {
              attrsString += " " + attrs[j].nodeName + '="' + attrs[j].nodeValue + '"';
            }
          }
          rowAttrsArr.push(attrsString);
          heightArr.push($(this).height());
        });
  
        // compute width, no special handling for ie needed :-)
        var widthArr = [];
        // compute total width, needed for not wrapping around after the screen ends (floating)
        var totalWidth = 0;
        /* Find children thead and tbody.
         * Only to process the immediate tr-children. Bugfix for inner tables
         */
        var thtb = _this.originalTable.el.children();
        if (this.options.excludeFooter) {
          thtb = thtb.not('tfoot');
        }
        thtb.find('&gt; tr &gt; th').each(function(i, v) {
          var w = $(this).outerWidth();
          widthArr.push(w);
          totalWidth += w;
        });
        if (_this.options.exact) {
          var difference = totalWidth - _this.originalTable.el.outerWidth();
          widthArr[0] -= difference;
        }
        // one extra px on right and left side
        totalWidth += 2
  
        var sortableHtml = '&lt;ul class="dragtable-sortable" style="position:absolute; width:' + totalWidth + 'px;"&gt;';
        // assemble the needed html
        thtb.find('&gt; tr &gt; th').each(function(i, v) {
          sortableHtml += '&lt;li&gt;';
          sortableHtml += '&lt;table ' + attrsString + '&gt;';
          var row = thtb.find('&gt; tr &gt; th:nth-child(' + (i + 1) + ')');
          if (_this.options.maxMovingRows &gt; 1) {
            row = row.add(thtb.find('&gt; tr &gt; td:nth-child(' + (i + 1) + ')').slice(0, _this.options.maxMovingRows - 1));
          }
          row.each(function(j) {
            // TODO: May cause duplicate style-Attribute
            var row_content = $(this).clone().wrap('&lt;div&gt;&lt;/div&gt;').parent().html();
            if (row_content.toLowerCase().indexOf('&lt;th') === 0) sortableHtml += "&lt;thead&gt;";
            sortableHtml += '&lt;tr ' + rowAttrsArr[j] + '" style="height:' + heightArr[j] + 'px;"&gt;';
            sortableHtml += row_content;
            if (row_content.toLowerCase().indexOf('&lt;th') === 0) sortableHtml += "&lt;/thead&gt;";
            sortableHtml += '&lt;/tr&gt;';
          });
          sortableHtml += '&lt;/table&gt;';
          sortableHtml += '&lt;/li&gt;';
        });
        sortableHtml += '&lt;/ul&gt;';
        this.sortableTable.el = this.originalTable.el.before(sortableHtml).prev();
        // set width if necessary
        this.sortableTable.el.find('&gt; li &gt; table').each(function(i, v) {
          $(this).css('width', widthArr[i] + 'px');
        });
  
        // assign this.sortableTable.selectedHandle
        this.sortableTable.selectedHandle = this.sortableTable.el.find('th .dragtable-handle-selected');
  
        var items = !this.options.dragaccept ? 'li' : 'li:has(' + this.options.dragaccept + ')';
        this.sortableTable.el.sortable({
          items: items,
          stop: this._rearrangeTable(),
          // pass thru options for sortable widget
          revert: this.options.revert,
          tolerance: this.options.tolerance,
          containment: this.options.containment,
          cursor: this.options.cursor,
          cursorAt: this.options.cursorAt,
          distance: this.options.distance,
          axis: this.options.axis
        });
  
        // assign start index
        this.originalTable.startIndex = $(e.target).closest('th').prevAll().size() + 1;
  
        this.options.beforeMoving(this.originalTable, this.sortableTable);
        // Start moving by delegating the original event to the new sortable table
        this.sortableTable.movingRow = this.sortableTable.el.find('&gt; li:nth-child(' + this.originalTable.startIndex + ')');
  
        // prevent the user from drag selecting "highlighting" surrounding page elements
        disableTextSelection();
        // clone the initial event and trigger the sort with it
        this.sortableTable.movingRow.trigger($.extend($.Event(e.type), {
          which: 1,
          clientX: e.clientX,
          clientY: e.clientY,
          pageX: e.pageX,
          pageY: e.pageY,
          screenX: e.screenX,
          screenY: e.screenY
        }));
  
        // Some inner divs to deliver the posibillity to style the placeholder more sophisticated
        var placeholder = this.sortableTable.el.find('.ui-sortable-placeholder');
        if (!placeholder.height() &lt;= 0) {
          placeholder.css('height', this.sortableTable.el.find('.ui-sortable-helper').height());
        }
  
        placeholder.html('&lt;div class="outer" style="height:100%;"&gt;&lt;div class="inner" style="height:100%;"&gt;&lt;/div&gt;&lt;/div&gt;');
      },
      bindTo: {},
      _create: function() {
        this.originalTable = {
          el: this.element,
          selectedHandle: $(),
          sortOrder: {},
          startIndex: 0,
          endIndex: 0
        };
        // bind draggable to 'th' by default
        this.bindTo = this.originalTable.el.find('th');
        // filter only the cols that are accepted
        if (this.options.dragaccept) {
          this.bindTo = this.bindTo.filter(this.options.dragaccept);
        }
        // bind draggable to handle if exists
        if (this.bindTo.find(this.options.dragHandle).size() &gt; 0) {
          this.bindTo = this.bindTo.find(this.options.dragHandle);
        }
        // restore state if necessary
        if (this.options.restoreState !== null) {
          $.isFunction(this.options.restoreState) ? this.options.restoreState(this.originalTable) : this._restoreState(this.options.restoreState);
        }
        var _this = this;
        this.bindTo.mousedown(function(evt) {
          if (_this.options.beforeStart(this.originalTable) === false) {
            return;
          }
          clearTimeout(this.downTimer);
          this.downTimer = setTimeout(function() {
            _this.originalTable.selectedHandle = $(this);
            _this.originalTable.selectedHandle.addClass('dragtable-handle-selected');
            _this._generateSortable(evt);
          }, _this.options.clickDelay);
        }).mouseup(function(evt) {
          clearTimeout(this.downTimer);
        });
      },
      redraw: function() {
        this.destroy();
        this._create();
      },
      destroy: function() {
        this.bindTo.unbind('mousedown');
        $.Widget.prototype.destroy.apply(this, arguments); // default destroy
        // now do other stuff particular to this widget
      }
    });
  
    /** closure-scoped "private" functions **/
  
    var body_onselectstart_save = $(document.body).attr('onselectstart'),
      body_unselectable_save = $(document.body).attr('unselectable');
  
    // css properties to disable user-select on the body tag by appending a &lt;style&gt; tag to the &lt;head&gt;
    // remove any current document selections
  
    function disableTextSelection() {
      // jQuery doesn't support the element.text attribute in MSIE 8
      // http://stackoverflow.com/questions/2692770/style-style-textcss-appendtohead-does-not-work-in-ie
      var $style = $('&lt;style id="__dragtable_disable_text_selection__" type="text/css"&gt;body { -ms-user-select:none;-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;user-select:none; }&lt;/style&gt;');
      $(document.head).append($style);
      $(document.body).attr('onselectstart', 'return false;').attr('unselectable', 'on');
      if (window.getSelection) {
        window.getSelection().removeAllRanges();
      } else {
        document.selection.empty(); // MSIE http://msdn.microsoft.com/en-us/library/ms535869%28v=VS.85%29.aspx
      }
    }
  
    // remove the &lt;style&gt; tag, and restore the original &lt;body&gt; onselectstart attribute
  
    function restoreTextSelection() {
      $('#__dragtable_disable_text_selection__').remove();
      if (body_onselectstart_save) {
        $(document.body).attr('onselectstart', body_onselectstart_save);
      } else {
        $(document.body).removeAttr('onselectstart');
      }
      if (body_unselectable_save) {
        $(document.body).attr('unselectable', body_unselectable_save);
      } else {
        $(document.body).removeAttr('unselectable');
      }
    }
  
    function swapNodes(a, b) {
      var aparent = a.parentNode;
      var asibling = a.nextSibling === b ? a : a.nextSibling;
      b.parentNode.insertBefore(a, b);
      aparent.insertBefore(b, asibling);
    }
  })(jQuery);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    .dragtable-sortable {
  
        list-style-type: none;
  
        margin: 0;
  
        padding: 0;
  
        -moz-user-select: none;
  
      }
  
      .dragtable-sortable li {
  
        margin: 0;
  
        padding: 0;
  
        float: left;
  
        font-size: 1em;
  
        background: white;
  
      }
  
      .dragtable-sortable th,
  
      .dragtable-sortable td {
  
        border-left: 0px;
  
      }
  
      .dragtable-sortable li:first-child th,
  
      .dragtable-sortable li:first-child td {
  
        border-left: 1px solid #CCC;
  
      }
  
      .ui-sortable-helper {
  
        opacity: 0.7;
  
        filter: alpha(opacity=70);
  
      }
  
      .ui-sortable-placeholder {
  
        -moz-box-shadow: 4px 5px 4px #C6C6C6 inset;
  
        -webkit-box-shadow: 4px 5px 4px #C6C6C6 inset;
  
        box-shadow: 4px 5px 4px #C6C6C6 inset;
  
        border-bottom: 1px solid #CCCCCC;
  
        border-top: 1px solid #CCCCCC;
  
        visibility: visible !important;
  
        background: #EFEFEF !important;
  
        visibility: visible !important;
  
      }
  
      .ui-sortable-placeholder * {
  
        opacity: 0.0;
  
        visibility: hidden;
  
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
    &lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" /&gt;
    &lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap-theme.min.css" /&gt;
    &lt;link rel="stylesheet" type="text/css" href="dragtable.css" /&gt;
    &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://github.com/akottr/dragtable/blob/master/jquery.dragtable.js"&gt;&lt;/script&gt;
    &lt;title&gt;jquery.dragtable.js&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;ul class="list"&gt;
  
      &lt;li&gt;FUNCTIONAL GROUP&lt;/li&gt;
      &lt;li&gt;CALLS IN QUEUE&lt;/li&gt;
      &lt;li&gt;LONG CALL WAITING&lt;/li&gt;
      &lt;li&gt;SERVICE LEVEL&lt;/li&gt;
      &lt;li&gt;AGENTS STAFFED&lt;/li&gt;
      &lt;li&gt;Forecasted staff&lt;/li&gt;
      &lt;li&gt;Longest Agent Available&lt;/li&gt;
      &lt;li&gt;AGENTS AVAL&lt;/li&gt;
      &lt;li&gt;AGENTS ON CALL&lt;/li&gt;
      &lt;li&gt;Cumulative CALLS OFFERED&lt;/li&gt;
      &lt;li&gt;Cumulative CALLS HANDLED&lt;/li&gt;
      &lt;li&gt;Cumulative SERVICE LEVEL&lt;/li&gt;
      &lt;li&gt;Cumulative CALLS ABND %&lt;/li&gt;
  
    &lt;/ul&gt;
    &lt;table class="table dataTable tree" id="table-first" data-role="table" data-mode="columntoggle"&gt;
      &lt;colgroup&gt;
        &lt;col id="col0"&gt;
          &lt;col id="col1"&gt;
            &lt;col id="col2"&gt;
              &lt;col id="col3"&gt;
                &lt;col id="col4"&gt;
                  &lt;col id="col5"&gt;
                    &lt;col id="col6"&gt;
                      &lt;col id="col7"&gt;
                        &lt;col id="col8"&gt;
                          &lt;col id="col9"&gt;
                            &lt;col id="col10"&gt;
                              &lt;col id="col11"&gt;
                                &lt;col id="col12"&gt;
                                  &lt;col id="col13"&gt;
                                    &lt;col id="col14"&gt;
      &lt;/colgroup&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th width="18%"&gt;FUNCTIONAL GROUP&lt;/th&gt;
          &lt;th width="5%"&gt;CALLS IN QUEUE&lt;/th&gt;
          &lt;th width="7%"&gt;LONG CALL WAITING&lt;/th&gt;
          &lt;th width="6%"&gt;SERVICE LEVEL&lt;/th&gt;
          &lt;th width="6%"&gt;AGENTS STAFFED&lt;/th&gt;
          &lt;th width="7%"&gt;Forecasted staff&lt;/th&gt;
          &lt;th width="8%"&gt;Longest Agent Available&lt;/th&gt;
          &lt;th width="5%"&gt;AGENTS AVAL&lt;/th&gt;
          &lt;th width="6%"&gt;AGENTS ON CALL&lt;/th&gt;
          &lt;th width="8%"&gt;Cumulative CALLS OFFERED&lt;/th&gt;
          &lt;th width="8%"&gt;Cumulative CALLS HANDLED&lt;/th&gt;
          &lt;th width="8%"&gt;Cumulative SERVICE LEVEL&lt;/th&gt;
          &lt;th width="8%"&gt;Cumulative CALLS ABND %&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;!--START BILLING TABLE SECTION--&gt;
        &lt;tr class="treegrid-1 drill-parent"&gt;
          &lt;td&gt;BILLING&lt;/td&gt;
          &lt;td&gt;7&lt;/td&gt;
          &lt;td&gt;:57:12&lt;/td&gt;
          &lt;td&gt;&amp;nbsp;&lt;/td&gt;
          &lt;td&gt;100&lt;/td&gt;
          &lt;td&gt;120&lt;/td&gt;
          &lt;td&gt;0:00:27&lt;/td&gt;
          &lt;td&gt;50&lt;/td&gt;
          &lt;td&gt;50&lt;/td&gt;
          &lt;td&gt;984&lt;/td&gt;
          &lt;td&gt;835&lt;/td&gt;
          &lt;td&gt;86.79%&lt;/td&gt;
          &lt;td&gt;15.14%&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr class="treegrid-2 treegrid-parent-1"&gt;
          &lt;td&gt;BILLING-COX&lt;/td&gt;
          &lt;td&gt;2&lt;/td&gt;
          &lt;td&gt;:50:10&lt;/td&gt;
          &lt;td&gt;80.50%&lt;/td&gt;
          &lt;td&gt;50&lt;/td&gt;
          &lt;td&gt;55&lt;/td&gt;
          &lt;td&gt;0:00:27&lt;/td&gt;
          &lt;td&gt;20&lt;/td&gt;
          &lt;td&gt;20&lt;/td&gt;
          &lt;td&gt;60&lt;/td&gt;
          &lt;td&gt;230&lt;/td&gt;
          &lt;td&gt;79.23%&lt;/td&gt;
          &lt;td&gt;2.80%&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr class="treegrid-3 treegrid-parent-2"&gt;
          &lt;td&gt;Payment&lt;/td&gt;
          &lt;td&gt;2&lt;/td&gt;
          &lt;td&gt;:50&lt;/td&gt;
          &lt;td&gt;90.00%&lt;/td&gt;
          &lt;td&gt;10&lt;/td&gt;
          &lt;td&gt;12&lt;/td&gt;
          &lt;td&gt;0:00:27&lt;/td&gt;
          &lt;td&gt;6&lt;/td&gt;
          &lt;td&gt;6&lt;/td&gt;
          &lt;td&gt;60&lt;/td&gt;
          &lt;td&gt;230&lt;/td&gt;
          &lt;td&gt;54&lt;/td&gt;
          &lt;td&gt;1.00%&lt;/td&gt;
        &lt;/tr&gt;
  
        &lt;tr class="treegrid-66 treegrid-parent-62"&gt;
          &lt;td&gt;COLLECTIONS-SITEL&lt;/td&gt;
          &lt;td&gt;3&lt;/td&gt;
          &lt;td&gt;20&lt;/td&gt;
          &lt;td&gt;60&lt;/td&gt;
          &lt;td&gt;14&lt;/td&gt;
          &lt;td&gt;7&lt;/td&gt;
          &lt;td&gt;0:00:27&lt;/td&gt;
          &lt;td&gt;12&lt;/td&gt;
          &lt;td&gt;12&lt;/td&gt;
          &lt;td&gt;45&lt;/td&gt;
          &lt;td&gt;200&lt;/td&gt;
          &lt;td&gt;89.00%&lt;/td&gt;
          &lt;td&gt;2&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr class="treegrid-67 treegrid-parent-66"&gt;
          &lt;td&gt;SAINT CATH&lt;/td&gt;
          &lt;td&gt;3&lt;/td&gt;
          &lt;td&gt;20&lt;/td&gt;
          &lt;td&gt;60&lt;/td&gt;
          &lt;td&gt;14&lt;/td&gt;
          &lt;td&gt;7&lt;/td&gt;
          &lt;td&gt;0:00:27&lt;/td&gt;
          &lt;td&gt;12&lt;/td&gt;
          &lt;td&gt;12&lt;/td&gt;
          &lt;td&gt;45&lt;/td&gt;
          &lt;td&gt;200&lt;/td&gt;
          &lt;td&gt;89.00%&lt;/td&gt;
          &lt;td&gt;2&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr class="treegrid-68 treegrid-parent-67"&gt;
          &lt;td&gt;COLLECTIONS OPERATION&lt;/td&gt;
          &lt;td&gt;3&lt;/td&gt;
          &lt;td&gt;20&lt;/td&gt;
          &lt;td&gt;60&lt;/td&gt;
          &lt;td&gt;14&lt;/td&gt;
          &lt;td&gt;7&lt;/td&gt;
          &lt;td&gt;0:00:27&lt;/td&gt;
          &lt;td&gt;12&lt;/td&gt;
          &lt;td&gt;12&lt;/td&gt;
          &lt;td&gt;45&lt;/td&gt;
          &lt;td&gt;200&lt;/td&gt;
          &lt;td&gt;89.00%&lt;/td&gt;
          &lt;td&gt;2&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr class="treegrid-69 treegrid-parent-67"&gt;
          &lt;td&gt;COLLECTIONS&lt;/td&gt;
          &lt;td&gt;3&lt;/td&gt;
          &lt;td&gt;20&lt;/td&gt;
          &lt;td&gt;60&lt;/td&gt;
          &lt;td&gt;14&lt;/td&gt;
          &lt;td&gt;7&lt;/td&gt;
          &lt;td&gt;0:00:27&lt;/td&gt;
          &lt;td&gt;12&lt;/td&gt;
          &lt;td&gt;12&lt;/td&gt;
          &lt;td&gt;45&lt;/td&gt;
          &lt;td&gt;200&lt;/td&gt;
          &lt;td&gt;89.00%&lt;/td&gt;
          &lt;td&gt;2&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr class="treegrid-70 treegrid-parent-67"&gt;
          &lt;td&gt;TELEPHONE&lt;/td&gt;
          &lt;td&gt;3&lt;/td&gt;
          &lt;td&gt;20&lt;/td&gt;
          &lt;td&gt;60&lt;/td&gt;
          &lt;td&gt;14&lt;/td&gt;
          &lt;td&gt;7&lt;/td&gt;
          &lt;td&gt;0:00:27&lt;/td&gt;
          &lt;td&gt;12&lt;/td&gt;
          &lt;td&gt;12&lt;/td&gt;
          &lt;td&gt;45&lt;/td&gt;
          &lt;td&gt;200&lt;/td&gt;
          &lt;td&gt;89.00%&lt;/td&gt;
          &lt;td&gt;2&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr class="treegrid-71 treegrid-parent-66"&gt;
          &lt;td&gt;PANAMA&lt;/td&gt;
          &lt;td&gt;3&lt;/td&gt;
          &lt;td&gt;20&lt;/td&gt;
          &lt;td&gt;60&lt;/td&gt;
          &lt;td&gt;14&lt;/td&gt;
          &lt;td&gt;7&lt;/td&gt;
          &lt;td&gt;0:00:27&lt;/td&gt;
          &lt;td&gt;12&lt;/td&gt;
          &lt;td&gt;12&lt;/td&gt;
          &lt;td&gt;45&lt;/td&gt;
          &lt;td&gt;200&lt;/td&gt;
          &lt;td&gt;89.00%&lt;/td&gt;
          &lt;td&gt;2&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr class="treegrid-72 treegrid-parent-71"&gt;
          &lt;td&gt;COLLECTIONS&lt;/td&gt;
          &lt;td&gt;3&lt;/td&gt;
          &lt;td&gt;20&lt;/td&gt;
          &lt;td&gt;60&lt;/td&gt;
          &lt;td&gt;14&lt;/td&gt;
          &lt;td&gt;7&lt;/td&gt;
          &lt;td&gt;0:00:27&lt;/td&gt;
          &lt;td&gt;12&lt;/td&gt;
          &lt;td&gt;12&lt;/td&gt;
          &lt;td&gt;45&lt;/td&gt;
          &lt;td&gt;200&lt;/td&gt;
          &lt;td&gt;89.00%&lt;/td&gt;
          &lt;td&gt;2&lt;/td&gt;
        &lt;/tr&gt;
        &lt;!--END COLLECTIONS TABLE SECTION--&gt;
  
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>