table固定头部,表格tbody可上下左右滑动

当表格头部固定时,需要分为两个表格来做:一部分是thead,一部分是tbody,具体实现方式如下:
html代码:

<div class="table_box_big">
<div class="table_box">
    <table>
        <thead>
        <tr>
            <th><div>标题一div>th>
            <th><div>标题二div>th>
            <th><div>标题三div>th>
            <th><div>标题标题标题标题标题标题标题标题标题四div>th>
            <th><div>标题标题标题标题标题标题标题标题标题五div>th>
            <th><div>标题标题标题标题标题标题标题标题标题六div>th>
        tr>
        thead>
    table>
    <div class="table_tbody_box">
        <table>
            <tr>
                <td>信息一td>
                <td>信息二td>
                <td>信息三td>
                <td>信息信息信息信息信息信息信息信息信息四td>
                <td>信息信息信息信息信息信息信息信息信息五td>
                <td>信息信息信息信息信息信息信息信息信息六td>
            tr>
            <tr>
                <td>信息一td>
                <td>信息二td>
                <td>信息三td>
                <td>信息信息信息信息信息信息信息信息信息四td>
                <td>信息信息信息信息信息信息信息信息信息五td>
                <td>信息信息信息信息信息信息信息信息信息六td>
            tr>
            <tr>
                <td>信息一td>
                <td>信息二td>
                <td>信息三td>
                <td>信息信息信息信息信息信息信息信息信息四td>
                <td>信息信息信息信息信息信息信息信息信息五td>
                <td>信息信息信息信息信息信息信息信息信息六td>
            tr>
            <tr>
                <td>信息一td>
                <td>信息二td>
                <td>信息三td>
                <td>信息信息信息信息信息信息信息信息信息四td>
                <td>信息信息信息信息信息信息信息信息信息五td>
                <td>信息信息信息信息信息信息信息信息信息六td>
            tr>
            <tr>
                <td>信息一td>
                <td>信息二td>
                <td>信息三td>
                <td>信息信息信息信息信息信息信息信息信息四td>
                <td>信息信息信息信息信息信息信息信息信息五td>
                <td>信息信息信息信息信息信息信息信息信息六td>
            tr>
            <tr>
                <td>信息一td>
                <td>信息二td>
                <td>信息三td>
                <td>信息信息信息信息信息信息信息信息信息四td>
                <td>信息信息信息信息信息信息信息信息信息五td>
                <td>信息信息信息信息信息信息信息信息信息六td>
            tr>
            <tr>
                <td>信息一td>
                <td>信息二td>
                <td>信息三td>
                <td>信息信息信息信息信息信息信息信息信息四td>
                <td>信息信息信息信息信息信息信息信息信息五td>
                <td>信息信息信息信息信息信息信息信息信息六td>
            tr>
            <tr>
                <td>信息一td>
                <td>信息二td>
                <td>信息三td>
                <td>信息信息信息信息信息信息信息信息信息四td>
                <td>信息信息信息信息信息信息信息信息信息五td>
                <td>信息信息信息信息信息信息信息信息信息六td>
            tr>
        table>
    div>
div>

css样式:

.table_box_big{overflow-x: scroll;overflow-y: hidden;position: relative;height: 350px;}
.table_box{overflow: hidden;position: absolute;}
.table_tbody_box{height: 300px;overflow: scroll;}
table{border: 1px solid #eeeeee;}
table thead tr th{width: 80px;height: 50px;border-right: 1px solid #eeeeee;text-align: center;word-break: keep-all;padding: 2px 10px;background: skyblue;}
table tbody tr td{width: 80px;height: 50px;border-right: 1px solid #eeeeee;text-align: center;border-bottom: 1px solid #eeeeee;word-break: keep-all;padding: 2px 10px;}

实现效果如下:
table固定头部,表格tbody可上下左右滑动_第1张图片

你可能感兴趣的:(前端)