html中table表头固定，并加滚动条

                        <table id="app-gas-content">
                                <thead>
                                    <tr sstyle="position:fixed;top:XXpx; z-index:2;">
                                        <th width="30%">监测类型</th>
                                        <th width="40%">监测位置</th>
                                        <th width="30%">监测值</th>
                                    </tr>
                                </thead>
                                <tbody id="app-gas-body">
                                    <tr>
                                        <td width="30%">监dddd测类的广泛地苟富贵型</td>
                                        <td width="40%">监测dagfg的广泛地位置</td>
                                        <td width="30%">监测值</td>
                                    </tr>
                                </tbody>

                            </table>

样式：

        #app-gas-content {
            table-layout: fixed;
            text-align: center;
            width: 100%;
            border: 1px solid white;
            border-collapse: collapse;
        }


           #app-gas-content th {
                color: #dae0e1;
                font-size: 14px;
                border: solid white;
                border-width: 0px 1px 1px 0px;
            }

        #app-gas-body td {
            color: #dae0e1;
            font-size: 14px;
            border: solid white;
            border-width: 0px 1px 1px 0px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }


        #app-gas-body {
            display: block;
            /*height: 100px;*/
            overflow-y: scroll;
        }


            #app-gas-content thead, #app-gas-body tr {
                display: table;
                width: 100%;
                table-layout: fixed;
            }


        #app-gas-content thead {
            width: calc( 100% - 1em );
        }