Can we make lightning datatable header static in LWC?

Question

Lightning datatable header scrolls along with values in my LWC. How can I make the headers fixed? I tried pasting the datatable code from here and adding CSS position:fixed attribute, but it did not work as expected.

Headers are present:

Headers scroll down:

HTML:

<div>
       <lightning-datatable key-field="Id" data={wrappers} columns={columns}
               onrowaction={navigateToRecordViewPage} hide-checkbox-column="true">
       </lightning-datatable>
</div>

Javascript:

const columns = [
    {
        label: 'View',
        type: 'button',
        initialWidth: 50,
        typeAttributes: {
            label: 'View',
            title: 'View',
            variant: 'base',
            alternativeText: 'View',
            target:'_blank'
        }
    },
    { label: 'Name', fieldName: 'name', type:'text' },
    { label: 'Email', fieldName: 'email', type: 'email' },
    { label: 'Phone', fieldName: 'phone', type: 'phone'},
    { label: 'MDM ID', fieldName: 'mdm', type: 'text' },
];

Answer 1

You just have to restrict the height of datatable as shown in example:

<template>
    <div style="height: 300px;">
        <lightning-datatable
                key-field="id"
                data={data}
                columns={columns}>
        </lightning-datatable>
    </div>    
</template>

Above table is restricted to 300px of height and so the header will be static in nature automatically