stickyheader后如何获得responsivetable？

Question

我已经在我的 angular 应用程序中安装了 sticky header 模块，我想获得一个 sticky-responsive thead。

初始

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

执行sticky header后table宽度固定：

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

我试图从脚本中删除 style 属性，但这没有帮助。我还看到 angular-scrollable-table 指令是 响应式 。

          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

我用 css class 覆盖了第 width 属性样式表：

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

如果我设法将上面的代码翻译成 js 模块

，我会更新这个答案

更新

如果您的应用中有不同的 table head 结构（例如 2 tables 和 2 th 和其他 5 tables with 10 th) 你可能想为每个 [=43] 设置合适的 th 宽度百分比 =] 通过更改 fsm-sticky-header.js 函数 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  + '%');
        });
      }
    };

stickyheader后如何获得responsivetable？

How to obtain responsive table after sticky header?

javascript

css

angularjs

sticky