将固定标头添加到动态表

时间:2015-09-30 14:55:54

标签: javascript html css angularjs

我发现自己再次需要帮助,堆栈溢出。

基本上我有一个表,它使用AngularJS用数据填充各行。所述数据的长度会发生变化,因此表头的大小会不断变化以适应。

我的问题是有一个固定的标题,它与表体的大小保持不变。它是一个类似于plnkr中所示的表格。

任何想法都会受到赞赏,包括Javascript。

    <thead>
        <tr>
            <th class="statwidth"><span ng-click="setOrderProperty('a')"></span></th>
            <th>R<span ng-click="setOrderProperty('b')"></span></th>
            <th>S<span ng-click="setOrderProperty('c')" class="glyphicon glyphicon-chevron-down pull-right"></span></th>
            <th>D<span ng-click="setOrderProperty('d')" class="glyphicon glyphicon-chevron-down pull-right"></span></th>
            <th>O<span ng-click="setOrderProperty('e')" class="glyphicon glyphicon-chevron-down pull-right">
            </span></th>
            <th>St<span ng-click="setOrderProperty('f')"></span></th>
        </tr>
        </thead>

http://plnkr.co/edit/T0qaEBLp9qcPZuUQR6Jl?p=preview

1 个答案:

答案 0 :(得分:0)

表标记之后您可以使用col元素。

例如,对于三列:

<table>
  <colgroup>
    <col style="width:40%">
    <col style="width:30%">
    <col style="width:30%">
  </colgroup>  
  <tbody>
    ...
  </tbody>
</table>

我安排了一个小提琴:https://jsfiddle.net/pgh6o54z/