Table header is not fixing

[chandraa06]

Above 16 records table header is not visible in 1366*768 resolution laptop. In iPad and some other device resolutions it works good. please take a look and solve this.

Food Types

<!-- exact table from live demo -->

<md-table-container >

        <table id="foodTypeTable" md-table multiple md-progress="promiseGetFT">
            <thead fix-head md-head md-order="FTOrderBy" md-on-reorder="getFoodTypes">
                <tr md-row>
                    <th md-column md-order-by="id"><span>ID</span></th>
                    <th md-column md-numeric md-order-by="foodName"><span>@Html.DisplayNameFor(model => model.foodName) Food Type</span></th>
                    <th md-column md-numeric>Fat (g)</th>

                </tr>
            </thead>
            <tbody md-body>
                <tr md-row md-select="item" md-select-id="foodName" md-auto-select ng-repeat="item in FoodTypes | orderBy : FTOrderBy ">
                    <td md-cell>{{item.id}}</td>
                    <td md-cell>{{item.foodName}}</td>
                    <td md-cell>{{item.foodName}}</td>

                </tr>
            </tbody>
        </table>

</md-table-container>

[jraadt]

You need your md-table-container element wrapped in an element with max-height and overflow: auto; properties.

[chandraa06]

OK, but here I'm using div with flex property, so I can't give fixed height. Please tell me how to manage this

[jraadt]

I had a situation where I couldn't give a fixed height either. I reworked fixed-table-header to use Angular Material's $mdSticky service, taking cues from md-subheader. It seems to work great now when it's inside an md-content tag or a flex container. See pull request #15.

[vko-online]

@jraadt it doesn't work either tho