gpt4 book ai didi

jquery - 动态表头修复问题

转载 作者:行者123 更新时间:2023-11-28 17:37:44 29 4
gpt4 key购买 nike

我这里有一个完全动态的表格,所有单元格都是从数据库的值动态生成的。问题是如何修复我的表格标题在滚动 x 和 y 轴时始终可见。我只是粘贴静态代码和我的 fiddle 。 http://jsfiddle.net/kannankds/8gMVJ/5/

<div id="container">
<table id="my_table">
<thead>
<th>head1</th>
<th>head1</th>
</thead>
<tbody>
<tr><td>data1</td>
<td>data2</td>
</tr>
</tbody>
</table>
</div>

最佳答案

你可以用一些 CSS 来做到这一点:

#table-wrapper {
position:relative;
}
#table-scroll {
height:150px;
overflow:auto;
margin-top:20px;
}
#table-wrapper table {
width:100%;

}
#table-wrapper table * {
background:yellow;
color:black;
}
#table-wrapper table thead th .text {
position:absolute;
top:-20px;
z-index:2;
height:20px;
width:35%;
border:1px solid red;
}

HTML:

<div id="table-wrapper">
<div id="table-scroll">
<table>
<thead>
<tr>
<th><span class="text">A</span></th>
<th><span class="text">B</span></th>
<th><span class="text">C</span></th>
</tr>
</thead>
<tbody>
<tr> <th>1, 0</th> <th>2, 0</th> <th>3, 0</th> </tr>
<tr> <th>1, 1</th> <th>2, 1</th> <th>3, 1</th> </tr>
<tr> <th>1, 2</th> <th>2, 2</th> <th>3, 2</th> </tr>
<tr> <th>1, 3</th> <th>2, 3</th> <th>3, 3</th> </tr>
</tbody>
</table>
</div>
</div>

DEMO

你也可以使用

  1. FixedHeaderPlugin
  2. http://www.imaputz.com/cssStuff/bigFourVersion.html
  3. http://imar.spaanjaars.com/357/a-scrollable-table-with-a-fixed-header
  4. http://jsfiddle.net/deepakmanwal/dBe5w/

关于jquery - 动态表头修复问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24772427/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com