Question

我在我的角度应用程序中安装了sticky header模块，我希望获得一个响应敏感的 thead 。

初始

uses VCLTee.Series;

procedure TForm1.FormCreate(Sender: TObject);
var Series1, Series2: THorizBarSeries;
begin
  Series1 := THorizBarSeries.Create(Self);
  Series1.FillSampleValues();
  Series1.MultiBar := mbNone;

  Series2 := THorizBarSeries.Create(Self);
  Series2.FillSampleValues();
  Series2.MultiBar := mbNone;

  Chart1.AddSeries(Series1);
  Chart1.AddSeries(Series2);
end;

执行sticky header后，表格宽度固定：

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

我尝试从脚本中删除样式属性，但这没有用。我还看到angular-scrollable-table指令响应。

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

Answer 1

我在主样式表中使用 css类覆盖了 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模块

，我会更新此答案

<强>更新

如果您的应用中有不同的表头结构（例如，2个表<2> ，其他5个表<10> ）您可能希望通过在 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 + '%'); }); } };

粘贴标题后如何获取响应表？

1 个答案: