如何使用css或jquery修复表头 [英] How to make table header fixed using css or jquery

问题描述

大家好，



我在互联网上搜索了很多并且也应用了解决方案，但实际上并没有为我工作。所以，最后我来这里需要你的帮助。



问题：

我有一个空白的asp。 net grid并使用jquery ajax填充它。我为所有列指定了特定的宽度。我想让桌面标题在滚动时保持固定。



现在，我应用了几个css（在互联网上看到）：

＃ table_id   thead ，＃ table   tbody  
 {
  display  ：  block;  
  width  ：  100％;  
} 
 

但是，整个表格结构都搞砸了。



我也试过像粘性表标题，冻结标题，数据表插件等但没有运气。



请给我一些想法来解决它。



谢谢。

解决方案

你可以使用纯CSS这样做：

  table  {
  border-spacing  ：  0;  
  width  ：  100％;  
} 
  td   +   td  {
  border-left  ：  1px solid #eee;  
} 
  td ， th  {
  border-bottom  ：  1px solid #eee;  
  background  ：  #ddd;  
 颜色 ：  ＃000;  
  padding   ：  10px 25px;  
} 
  th  {
  height  ：  0;  
  line-height  ：  0;  
  padding-top  ：  0;  
  padding-bottom  ：  0;  
 颜色 ：  transparen t;  
  border  ：  none;  
  white-space  ：  nowrap;  
} 
  th   div  {
  position  ： 绝对值;  
 背景 ： 透明;  
 颜色 ：  #fff;  
  padding  ：  9px 25px;  
  top  ：  0;  
  margin-left  ：  -25px;  
  line-height  ： 正常;  
  border-left  ：  1px solid＃800;  
} 
  th：first-child  < span class =code-leadattribute> div  {
  border  ： < span class =code-keyword> none;  
} 

DEMO： FIDDLE [ ^ ]

我想你想让桌子男孩可滚动。您可以使用CSS：

  thead ， tbody  { display  ：  block; } 
 
  tbody  {
  overflow-y  ：  auto;   / *  垂直滚动* /  
  overflow-x  ： 隐藏;  
} 

小提琴 [ ^ ]

-KR

根据我的理解，您正在寻找带有固定标题的可滚动gridview的帖子，如果您的要求是，请参考下面的链接，我将通过简单的示例清楚地解释如何实现上述要求 http://www.dotnetspider.com/resources/45021-Scrollable-GridView-using-JQuery.aspx [ ^ ]

Hi All,

I searched a lot in the internet and also applied the solutions but none of them worked for me actually. So, finally I am here and need your help.

Problem:
I have a blank asp.net grid and its getting populated using jquery ajax. I am specifying specific width for all the columns. I want the table header to be remain fixed while scrolling.

Now, I applied few css (as seen on internet):

#table_id thead, #table tbody
{
   display: block;
   width: 100%;
}

But, the whole table structure is getting messed up.

I also tried with plugins like "sticky table headers", "freeze headers", "datatable plugins" etc. but came with no luck.

Please give me some ideas to sort it out.

Thank you.

解决方案

You can do this using pure CSS like:

table {
    border-spacing: 0;
    width:100%;
}
td + td {
    border-left:1px solid #eee;
}
td, th {
    border-bottom:1px solid #eee;
    background: #ddd;
    color: #000;
    padding: 10px 25px;
}
th {
    height: 0;
    line-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    color: transparent;
    border: none;
    white-space: nowrap;
}
th div {
    position: absolute;
    background: transparent;
    color: #fff;
    padding: 9px 25px;
    top: 0;
    margin-left: -25px;
    line-height: normal;
    border-left: 1px solid #800;
}
th:first-child div {
    border: none;
}

DEMO: FIDDLE[^]

I think you want to make the table boy scrollable. You can do it using CSS:

thead, tbody { display: block; }

tbody { 
    overflow-y: auto;    /* vertical scroll    */
    overflow-x: hidden; 
}

Fiddle[^]
-KR

As per my understand the post you are looking for scrollable gridview with fixed headers, If your requirement is that then refer below link here I explain you clearly how to achieve the above requirement with simple example http://www.dotnetspider.com/resources/45021-Scrollable-GridView-using-JQuery.aspx[^]

这篇关于如何使用css或jquery修复表头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！