How to make single row Non scrollable in HTML

Question

I want to create a table scrollable but i need to freeze first row of the table from scrolling. how could i achieve this. Expecting any ideas from CSS or JS or Jquery

Answer 1

Your requirement is a very common use case, and quite sadly there is no native way of achieving it in any browser. You have plenty workarounds using CSS, JS, combinations, each solution having specific advantages and inconvenients (the main most common one being the need to fix the columns widths).

You can of course implement it yourself (browse on the web, you should have plenty tutorials for this). Or you can rely on a library that avoids common pitfalls and is most cross-browsers.

You would probably be interested in DataTables plugin for jQuery, and especially its FixedHeader extension.

Answer 2

example. 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

Answer 3

Using Angular you could use the FixedHeader module like this found on ngmodules http://ngmodules.org/modules/FixedHeader . Or using jquery Plug in http://markmalek.github.io/Fixed-Header-Table/

Also check out using css position: sticky http://charliepark.org/css-only-sticky-headers/

Answer 4

This is called Table Fixed Header Scrolling. You can use this jquery plugin it's very simple to be implemented fixedheadertable plugin

Answer 5

使用插件fixedheadertable ， Datatable参考链接Stack over Flow