gpt4 book ai didi

html - 具有固定行和列标题的表格

转载 作者:行者123 更新时间:2023-11-28 13:06:33 25 4
gpt4 key购买 nike

<分区>

有个类似的问题Here .但它是不同的。在这里我需要一列和一行作为标题。我的元素中有一张 table ,我想水平和垂直滚动,如 This

但我需要在垂直滚动时固定标题。我不知道该怎么做。任何帮助将不胜感激。

http://jsfiddle.net/4z54E/4/

这是我的示例 html

<div style="overflow: scroll; width: 300px;height:300px;">
<table class="myTable tablesorter" style="width:100%;" id="table">

<thead style=" font-size: 13px;height: 70px;">
<tr>
<th style="width:25px;cursor:pointer;" class="header">Title1</th>
<th style="width:25px;cursor:pointer;" class="header">Title2</th>
<th style="width:25px;cursor:pointer;" class="header">Title3</th>
<th style="width:60px;cursor:pointer;" class="header">Title4</th>
<th style="width:150px;cursor:pointer;" class="header">Title5</th>
<th style="width:60px;cursor:pointer;" class="header">Title6</th>
<th style="width:150px;cursor:pointer;" class="header">Title7</th>
<th style="width:60px;cursor:pointer;" class="header">Title8</th>
<th style="width:150px;cursor:pointer;" class="header">Title9</th>
<th style="width:60px;cursor:pointer;" class="header">Title10</th>
<th style="width:150px;cursor:pointer;" class="header">Title11</th>
</tr>
</thead>
<tbody style="font-size: 0.7em;">

<tr bgcolor="#FFFFFF">
<td>Test data</td>
<td>Test data</td>
<td style="white-space:nowrap;">Test data This has long text</td>
<td style="white-space:nowrap;">Test data This has long text</td>
<td style="white-space:nowrap;">Test data This has long text</td>
<td style="white-space:nowrap;">Test data This has long text</td>
<td style="white-space:nowrap;">Test data This has long text</td>
<td style="white-space:nowrap;">Test data This has long text</td>
<td style="white-space:nowrap;">Test data This has long text</td>
<td style="white-space:nowrap;">Test data</td>
<td style="white-space:nowrap;">Test data</td>
</tr>
<tr bgcolor="#FFFFFF">
<td>Test data</td>
<td>Test data</td>
<td style="white-space:nowrap;">Test data This has long text</td>
<td style="white-space:nowrap;">Test data This has long text</td>
<td style="white-space:nowrap;">Test data This has long text</td>
<td style="white-space:nowrap;">Test data This has long text</td>
<td style="white-space:nowrap;">Test data This has long text</td>
<td style="white-space:nowrap;">Test data This has long text</td>
<td style="white-space:nowrap;">Test data This has long text</td>
<td style="white-space:nowrap;">Test data</td>
<td style="white-space:nowrap;">Test data</td>
</tr>
<tr bgcolor="#FFFFFF">
<td>Test data</td>
<td>Test data</td>
<td style="white-space:nowrap;">Test data This has long text</td>
<td style="white-space:nowrap;">Test data This has long text</td>
<td style="white-space:nowrap;">Test data This has long text</td>
<td style="white-space:nowrap;">Test data This has long text</td>
<td style="white-space:nowrap;">Test data This has long text</td>
<td style="white-space:nowrap;">Test data This has long text</td>
<td style="white-space:nowrap;">Test data This has long text</td>
<td style="white-space:nowrap;">Test data</td>
<td style="white-space:nowrap;">Test data</td>
</tr>

</tbody>
</table>
</div>

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