How to obtain responsive table after sticky header?

Question

I have installed sticky header module in my angular application and I want to obtain a sticky-responsive thead .

Initial

<!--"table" = responsive boostrap class-->
<table class="table">
    <thead>
        <tr>
            <th>...</th>
            <th>...</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>...</td>
            <td>...</td>
        </tr>
    </tbody>
</table>

After sticky header executes the table width is fixed:

    <thead>
        <tr>
            <th style="width:173px">...</th>
            <th style="width:173px">...</th>
        </tr>
    </thead>

I tried to remove the style attribute from the script, but this is not helpful. I have also seen that angular-scrollable-table directive is responsive .

          var headersAreFixed = $q.defer();

          function fixHeaderWidths() {
            if (!$element.find("thead th .th-inner").length) {
              $element.find("thead th").wrapInner('<div class="th-inner"></div>');
            }
            if($element.find("thead th .th-inner:not(:has(.box))").length) {
              $element.find("thead th .th-inner:not(:has(.box))").wrapInner('<div class="box"></div>');
            }

            $element.find("table th .th-inner:visible").each(function (index, el) {
              el = angular.element(el);
              var width = el.parent().width(),
                lastCol = $element.find("table th:visible:last"),
                headerWidth = width;
              if (lastCol.css("text-align") !== "center") {
                var hasScrollbar = $element.find(".scrollArea").height() < $element.find("table").height();
                if (lastCol[0] == el.parent()[0] && hasScrollbar) {
                  headerWidth += $element.find(".scrollArea").width() - $element.find("tbody tr").width();
                  headerWidth = Math.max(headerWidth, width);
                }
              }
              var minWidth = _getScale(el.parent().css('min-width')),
                title = el.parent().attr("title");
              headerWidth = Math.max(minWidth, headerWidth);
              el.css("width", headerWidth);
              if (!title) {
                // ordinary column(not sortableHeader) has box child div element that contained title string.
                title = el.find(".title .ng-scope").html() || el.find(".box").html();
              }
              //el.attr("title", title.trim());
            });
            headersAreFixed.resolve();
          }

Answer 1

I overrode the th width property with a css class in my main stylesheet:

<table class="table-fix">
<thead>
    <tr>
        <th class="table-header-fix2">...</th>
        <th class="table-header-fix2">...</th>
    </tr>
</thead>

.table-header-fix2{
    width:12.50% !important; // 12.50 = fullScreenWidth / nr_Columns
}

I will update this answer if I manage to translate the code above into the js module

Update

If you have different table head structures in your app (for example 2 tables with 2 th and other 5 tables with 10 th ) you might want to set the proper th width percentage for each table by doing a change in the fsm-sticky-header.js function setColumnHeaderSizes() :

var thNumber = 0;
function setColumnHeaderSizes() {
      if (clonedHeader.is('tr') || clonedHeader.is('thead')) {
        var clonedColumns = clonedHeader.find('th');
        thNumber = 100 / ($(".table-fix").find("tr:first th").length;
        header.find('th').each(function (index, column) {
          var clonedColumn = $(clonedColumns[index]);
          clonedColumn.css( 'width', thNumber  + '%');
        });
      }
    };