Question

有一个类似于Here的问题。但它是一个不同的。在这里，我需要一个列和一行作为标题。我的项目中有一个表格，我希望像h This

一样在水平和垂直方向上滚动

但是当我们垂直滚动时，我需要修复标题。我不知道怎么做。任何帮助将不胜感激。

这是我的示例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>

Answer 1

好的，我正在尝试我能做的事情^^“

position:fixed;

http://jsfiddle.net/TheBakaTensai/CfEyn/

具有固定行和列标题的表

1 个答案: