标签: fixed-header-tables

         <asp:Panel ID="panel_gridholder" runat="server"  style="position:absolute;left:10px;width:97%; min-width:1020px;margin-top:3px;margin-bottom:20px;overflow:auto;" >


            <asp:GridView ID="GridView_Vehicle" runat="server" AutoGenerateColumns="False" AllowSorting="true" PagerSettings-Position="TopAndBottom"
                OnPageIndexChanging="GridView_Vehicle_PageIndexChanging" OnSorting="GridView_Vehicle_Sorting" PageSize="100"
                GridLines="None" AllowPaging="true" CssClass="mGrid" PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt">
                <Columns> </Columns>
           </asp:GridView>

            <div style="height: 400px"></div>
        </asp:Panel>

Run Code Online (Sandbox Code Playgroud)

有什么建议？

gridview webforms vertical-scrolling fixed-header-tables

Van*_*ani

2017 03-25

8
推荐指数

1
解决办法

822
查看次数

JS dataTables.fixedHeader标头和数据之间的宽度不同

我使用javascript插件dataTables.fixedHeader并用ajax填充数据.现在我遇到了问题,每个数据列的宽度是动态的,并且标题保持在相同的静态宽度.

宽度不同

码:

HTML:

<table class="table table-striped table-bordered table-hover" id="custTable">
                    <thead>
                        <tr>
                            <th>
                                ......
                            </th>
                            <th>
                                ......
                            </th>
                            <th>
                                ......
                            </th>
......
                        </tr>
                    </thead>
                    <tbody id="dataList"></tbody>
                </table>

Run Code Online (Sandbox Code Playgroud)

JS:

table = $('#custTable').DataTable({
            "dom": "frtiS",
            "deferRender": true,
        });

Run Code Online (Sandbox Code Playgroud)

填充:

$('#custTable').dataTable().fnAddData([
               xyz, xyz, xyz, ...
                        ]);

Run Code Online (Sandbox Code Playgroud)

html javascript datatable fixed-header-tables

ale*_*ire

lucky-day

7
推荐指数

1
解决办法

441
查看次数

修复了Angular Material Design中的表头

如何使用md-toolbar制作表粘性标题

我已经将md-toolbar中的thead包含在固定表头中,当我滚动表格内容时,标题没有固定到顶部.下面是我的代码和codepen链接http://codepen.io/apps4any/pen/WQgKMw

 <html lang="en" ng-app="demoApp">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.1/angular-material.min.css">
    <link rel="stylesheet" href="http://rawgit.com/daniel-nagy/md-data-table/master/dist/md-data-table.css">
  </head>
  <body layout="column">
    <md-toolbar>
      <div class="md-toolbar-tools">
        <div class="md-title">Material Design Data Table</div>
      </div>
    </md-toolbar>
    <md-content layout="column" flex>
      <md-card ng-controller="nutritionController">
        <md-data-table-container>
          <table md-data-table class="md-primary" md-row-select="selected" md-progress="deferred">
           <md-toolbar>
            <thead md-order="query.order" md-trigger="onorderchange">
              <tr>
                <th order-by="name" name="Dessert" unit="100g serving"></th>
                <th order-by="type" name="Type"></th>
                <th numeric order-by="calories.value" name="Calories"></th>
                <th numeric unit="g" order-by="fat.value" name="Fat"></th>
                <th numeric unit="g" order-by="carbs.value" name="Carbs"></th>
                <th numeric unit="g" order-by="protein.value" name="Protein"></th>
                <th …

Run Code Online (Sandbox Code Playgroud)

fixed-header-tables angularjs angular-material

app*_*any

lucky-day

6
推荐指数

1
解决办法

5413
查看次数

我试过看了整个地方,找不到解决问题的好办法.我期待创建一个具有固定标题的表,在滚动表的其余部分时保留.问题是我还希望它能够在页面窗口调整时对齐.我已经能够获得固定的标题,并且能够在调整窗口时使列对齐,但是无法使两者一起工作.有没有可以做到这一点的脚本？我尝试过固定的jquery,flexigrid,固定标头咖啡,chromatable和floatyhead.这些都没有能够给我我想要的解决方案.也许我做错了但是我有一个使用theader,tbody等的传统表.我想避免将表分成两个表,因为它们似乎从未正确排列,但如果这是唯一的解决方案,我会接受.

请帮忙!

javascript css jquery html-table fixed-header-tables

acm*_*er9

2018 09-13

5
推荐指数

1
解决办法

1251
查看次数

使用FixedHeader时出现问题

更新:我与FixedHeader的作者交谈,似乎它对我不起作用.我认为问题是我的表位于选项卡内部,这导致了一些问题(请参阅我的其他更新中的屏幕截图),他说当前版本的FixedHeader没有解决这些问题.我已经尝试了一些固定表头的其他插件和方法,他们都给了我类似的问题.我怀疑是因为我的桌子在一个标签内.如果有人有任何简单的解决方案,请告诉我.否则,不要担心.我有很多其他的东西要为这个网站工作,固定的表格标题似乎占用了太多时间.

我正在尝试将FixedHeader用于我的网站.

我下载了FixedHeader.js并将其放入vendor/assets/javascripts.我//= require FixedHeader在application.js.

在colleges.html.erb我给自己定一个类的table-fixed-header每一个我的两个表,并有<%= javascript_include_tag :application %>.在colleges.js,我有var oTable = $('.table-fixed-header').dataTable(); new FixedHeader( oTable );.

在开发环境中,当我去检查元素>资源(在chrome中),FixedHeader.js加载时,但是有2个问题colleges.js:它说......

var oTable = $('.table-fixed-header').dataTable();  
Uncaught TypeError: Object [object Object] has no method 'dataTable' (repeated 2 times)
new FixedHeader( oTable );

Run Code Online (Sandbox Code Playgroud)

我该怎么做才能让它发挥作用？(现在它根本不起作用.)

编辑:我只是搞砸了一点,没有成功.我试过$.browser而不是jQuery.browser,但这给了我同样的'msie'错误.然后我尝试完全删除该代码,并且没有javascript错误,但是固定的标题并没有真正起作用(标题在我的网页顶部开始时不应该,它的大小不正确等等.).

更新:使用更新版本(https://github.com/DataTables/FixedHeader/blob/master/js/FixedHeader.js)获取标题,以便在单击表格链接之前显示在页面顶部(它应该是还没出现,它应该不是最顶层的.此外,它的大小不正确,并且没有排序功能.请看这些链接:
- http://awesomescreenshot.com/00d1pe963a
- http://awesomescreenshot.com/09e1pe9581
- http://awesomescreenshot.com/0d21pe9a2b

javascript jquery ruby-on-rails fixed-header-tables

Ada*_*ner

2017 03-09

5
推荐指数

1
解决办法

4804
查看次数

DataTables:隐藏tbody的滚动条时,固定列会搞乱

我有一张桌子,其中包括:

第一列是固定的
TFOOT
水平滚动条的脚
隐藏了tbody的水平滚动条.

小提琴:https://jsfiddle.net/jbeteta/6sxh3gbk/12/

    $(function() {
              $('#example').DataTable({         
            "fnInitComplete": function () {
                        // Disable scrolling in Head
                        $('.dataTables_scrollHead').css({
                            'overflow-y': 'hidden !important'
                        });

                        // Disable TBODY scroll bars
                        $('.dataTables_scrollBody').css({
                            'overflow-y': 'scroll',
                            'overflow-x': 'hidden',
                            'border': 'none'
                        });

                        // Enable TFOOT scoll bars
                        $('.dataTables_scrollFoot').css('overflow', 'auto');

                        //  Sync TFOOT scrolling with TBODY
                        $('.dataTables_scrollFoot').on('scroll', function () {
                            $('.dataTables_scrollBody').scrollLeft($(this).scrollLeft());
                        });

                    },
                scrollX: true,
                paging: true,
                fixedColumns: {
                  leftColumns: 1
                }
 });
        });

Run Code Online (Sandbox Code Playgroud)

在这种情况下,当您滚动到右侧时,您将看到固定列的最后一行单元格(背景颜色:红色)搞砸了,因为<tbody>隐藏了水平滚动条.

我的问题:有没有办法纠正这个？

顺便说一句:我不得不隐藏<tbody>水平滚动条,因为它没有与<tfoot>滚动条同步.

非常感谢 …

jquery datatables fixed-header-tables

Del*_*nte

2017 03-23

5
推荐指数

1
解决办法

1759
查看次数

页面底部的DataTable固定标题(在第一页加载时)

我有一个带有FixedHeader选项的DataTable,它在我的$(document).ready函数中填充了以下初始化.已经尝试了jquery查找和在40处硬编码的headerOffset值,具有相同的结果.

    "fixedHeader": {
        // "headerOffset": $("#top-navbar").outerHeight()
        "headerOffset": 40
    },

Run Code Online (Sandbox Code Playgroud)

DataTable是从ajax调用填充的,并且有render:一半我自己的函数,columnDefs但我不认为这是相关的.

我不确定为什么,但是第一次加载页面时,fixedHeader不会跟随屏幕顶部 - 而是位于表格下方页面的最底部.当我点击刷新 - 标题工作正常.

有什么想法吗？提前致谢.

javascript jquery datatables fixed-header-tables

A55*_*51N

lucky-day

5
推荐指数

1
解决办法

332
查看次数

具有两个粘性列和标题的 HTML 表格（仅使用 CSS）

我正在努力使用 HTML 表格 + 可滚动正文来获取两个固定列和标题。我进行了很多搜索并发现了这些方法：

这（只有 1 个固定列/标题）
和这个（只有 1 个固定列/标题；没有表格标记）
我还使用一个库创建了自己的解决方案，该解决方案工作正常，但我不喜欢 html 表标记标记变得混乱，而且初始化也不colModal是那么好，因为我有动态数量的列。

由于我对这些解决方案都不满意，我想知道是否有机会仅使用 CSS 来完成这项工作？

html css css-tables fixed-header-tables

bar*_*892

2018 05-07

5
推荐指数

1
解决办法

4834
查看次数

制作带有固定标题和固定侧边栏的可滚动表格

我需要始终显示标题和侧边栏索引,但让内容可以自由滚动x&y ...这个问题的任何解决方案？

我看过DataTables jQuery插件(例如:链接),但我想知道是否有其他选择.

html css jquery fixed-header-tables

ric*_*rdi

2018 10-11

4
推荐指数

1
解决办法

3万
查看次数

在表中的粘滞行和列标题

我正在尝试设计一个具有粘性thead和粘性行标题的表.所以,基本上,所有th元素都必须是粘性的.

我偶然发现了position: stickycss3属性,它似乎是这项工作的一个很好的候选人,即使它在许多浏览器中尚未得到支持(这对我来说不是问题).但MDN文档说:

'position:sticky'对表元素的影响与'position:relative'相同.

考虑到这一点,我已经构建了一个在Safari 10.0中工作的基本示例,即使粘性元素的边界不守恒.

在Firefox 50.0中,边框得不到显示但标题不粘.

所以,我的问题是:如何通过使用来干净利落地实现这个固定的头部定位position: sticky.似乎实现(实现时)不完整,表格支持更少.

如果不可能的话,我也会接受JavaScript中的解决方案来实现这一目标(但是由于我的整个应用程序都处于反应状态,因此将jQuery添加到我的堆栈中会非常麻烦).

这是我现在拥有的代码片段.请注意,为了获得一些粘性标题,您基本上需要safari或alpha版本的chrome.

div#container {
  height: 200px;
  width: 300px;
  overflow: auto;
}

table {
  border-collapse: collapse;
}

tbody th {
  position: -webkit-sticky;
  position: sticky;
  left: 0px;
}

thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
}

th {
  background: #B8C1C8;
  border: 2px solid black;
}

Run Code Online (Sandbox Code Playgroud)

<div id="container">
  <table>
    <thead>
      <tr>
        <th>hehe</th>
        <th>hello</th>
        <th>world</th>
        <th>hello</th>
        <th>world</th>
        <th>hello</th>
        <th>world</th>
        <th>hello</th>
        <th>world</th>
        <th>hello</th>
        <th>world</th>
      </tr>
    </thead> …

Run Code Online (Sandbox Code Playgroud)

html-table css-position sticky css3 fixed-header-tables

Chr*_*che

2017 05-23

2
推荐指数

1
解决办法

3663
查看次数