html制作一个表格

  如上图所示，使用html的table标签定义一个上下滚动时表头不动的表格。

  首先编写html代码，定义表头和内容，如下所示

<!--头部区域-->
<div style="" class="divOut">
    <div style="padding:10px 0 10px 15px;">
        <label style="color:#fff;font-size:18px;">本周材料异动</label> 
    </div>

    <!--内容-->
    <div class="divContent">

        <table class="tableC">
            <thead>
                <tr>
                    <th></th>
                    <th>
                        <label style="">
                            日期
                        </label>
                    </th>
                    <th>
                        <label style="">
                            材料名称
                        </label>
                    </th>
                    <th>
                        <label style="">
                            异动类型
                        </label>
                    </th>
                    <th>
                        <label style="">
                            异动数量
                        </label>
                    </th>
                    <th>
                        <label style="">
                            单位
                        </label>
                    </th>



                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in datas" :key="index">
                    <td>
                        <label class="labelC">{{ index+1 }}</label>
                    </td>
                    <td>
                        <label class="labelC">{{ item.time }}</label>
                    </td>
                    <td>
                        <label class="labelC">{{ item.name }}</label>
                    </td>
                    <td>
                        <label class="labelC">{{ item.type }}</label>
                    </td>
                    <td>
                        <label class="labelC">{{ item.value }}</label>
                    </td>
                    <td>
                        <label class="labelC">{{ item.unit }}</label>
                    </td>
                </tr>
            </tbody>
        </table>


    </div>
</div>

  接下来就需要使用CSS样式固定表头不动，

.divOut{
    border-radius: 10px 10px 10px 10px;
    display: flex;justify-content: space-between;flex-direction: column;
}

.divContent{
    border-radius: 20px;

    text-align: center;

    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
    width: 100%;
    font-size: 13px;
}
.tableC{
    width: 100%;
}
/* 调节表头宽度 */
table thead {
    width: calc(100%);
    background: linear-gradient(180deg, #7A6FF0 0%, rgba(83,49,144,0.43) 100%);
    box-shadow: 0px 3px 6px 1px #2E3651;
}

/* 固定表头 */
table thead,
tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

/* 控制表格滑动 */
table tbody {
    display: block;
    height: 250px;
    overflow-y: scroll;
    background-color: #2D3653;
}

/* 隐藏  y轴的滚动条，仍然可以上下滚动 */
table tbody::-webkit-scrollbar {
    display: none;
}

th, td { 
    white-space: nowrap;
    width: 130px;
    height: 50px; //必须要设置高度，否则无法滚动
    text-align: center;
    overflow: hidden;
}
label{
    color:#fff
}

  如上就可以让这个table作为一个基本组件了。