如何使单行在HTML中不可滚动

时间:2015-11-09 05:53:16

标签: javascript jquery css

我想创建一个可滚动的表,但我需要从滚动中冻结表的第一行。我怎么能实现这一点。期待来自CSS或JS或Jquery的任何想法

5 个答案:

答案 0 :(得分:1)

您的要求是一个非常常见的用例,很遗憾,在任何浏览器中都没有本机方式来实现它。你有很多使用CSS,JS,组合的解决方法,每个解决方案都有特定的优点和不便(主要最常见的是需要修复列宽)。

你当然可以自己实现它(在网上浏览,你应该有很多教程)。或者你可以依靠一个避免常见陷阱的库,并且是大多数跨浏览器。

你可能会对jQuery的DataTables插件感兴趣,特别是它的FixedHeader扩展名。

答案 1 :(得分:0)

例子。 的 HTML

<table class="scroll">
    <thead>
        <tr>
            <th>Head 1</th>
            <th>Head 2</th>
            <th>Head 3</th>
            <th>Head 4</th>
            <th>Head 5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
        <td> 1</td>
            <td> 2</td>
            <td> 3</td>
            <td> 4</td>
            <td>5</td>
        </tr>
        <tr>
         <td> 1</td>
            <td> 2</td>
            <td> 3</td>
            <td> 4</td>
            <td>5</td>
        </tr>
        <tr>
           <td> 1</td>
            <td> 2</td>
            <td> 3</td>
            <td> 4</td>
            <td>5</td>
        </tr>
        <tr>
            <td> 1</td>
            <td> 2</td>
            <td> 3</td>
            <td> 4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td> 2</td>
            <td> 3</td>
            <td> 4</td>
            <td>5</td>
        </tr>
        <tr>
            <td> 1</td>
            <td> 2</td>
            <td> 3</td>
            <td>4</td>
            <td> 5</td>
        </tr>
        <tr>
            <td> 1</td>
            <td> 2</td>
            <td> 3</td>
            <td> 4</td>
            <td> 5</td>
        </tr>
    </tbody>
</table>

<强> CSS

table.scroll {
    /* width: 100%; */ /* Optional */
    /* border-collapse: collapse; */
    border-spacing: 0;
    border: 2px solid black;
}

table.scroll tbody,
table.scroll thead { display: block; }

thead tr th { 
    height: 30px;
    line-height: 30px;
    /* text-align: left; */
}

table.scroll tbody {
    height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
}

tbody { border-top: 2px solid black; }

tbody td, thead th {
    /* width: 20%; */ /* Optional */
    border-right: 1px solid black;
    /* white-space: nowrap; */
}

tbody td:last-child, thead th:last-child {
    border-right: none;
}

<强> JS

// Change the selector if needed
var $table = $('table.scroll'),
    $bodyCells = $table.find('tbody tr:first').children(),
    colWidth;

// Adjust the width of thead cells when window resizes
$(window).resize(function() {
    // Get the tbody columns width array
    colWidth = $bodyCells.map(function() {
        return $(this).width();
    }).get();

    // Set the width of thead columns
    $table.find('thead tr').children().each(function(i, v) {
        $(v).width(colWidth[i]);
    });    
}).resize(); // Trigger resize handler

答案 2 :(得分:0)

使用Angular,您可以使用在ngmodules this上找到的http://ngmodules.org/modules/FixedHeader之类的FixedHeader模块。或使用jquery插入http://markmalek.github.io/Fixed-Header-Table/

还可以使用css位置检查:粘贴http://charliepark.org/css-only-sticky-headers/

答案 3 :(得分:0)

这称为表格固定页眉滚动。你可以使用这个jquery插件,它实现起来非常简单 fixedheadertable plugin

答案 4 :(得分:0)

使用插件fixedheadertableDatatable 请参阅链接Stack over Flow