Css實(shí)現(xiàn)表頭部不動(dòng)

字號:


    將下面代碼保存為html運(yùn)行看看
    <!doctype html public "-//w3c//dtd html 4.0 strict//en">
    <html>
    <head>
    <style>
    body {
    background-color: #F0F0F0 ;
    font: 11px "verdana","Arial";
    width:90%;
    margin-left:auto;
    margin-right:auto;
    }
    .tScroll {
    border: 1px #7494BF solid;
    background-color: #ffffff;
    overflow: scroll;
    overflow-x:hidden;
    height:100px;
    cursor: default;
    }
    tr.tableHead {
    position:relative;
    background-color:#BFCEE7;
    height: 16px;
    text-align: center;
    }
    td {
    font: 11px "Verdana", "Arial";
    }
    td.asBtn{
    border: #7494BF solid;
    border-width: 0px 1px 1px 0px;
    }
    table {
    border:0px;
    width:100%;
    }
    </style>
    </head>
    <body>
    <div id="tC">
    <table cellspacing="0" cellpadding="0">
    <tr onselectstart="return false"style="top:expression(document.getElementById('tC').scrollTop)">
    <td>heading1</td>
    <td>heading2</td><td>heading3</td>
    <td>heading4</td><td>heading5</td>
    <td>heading6</td>
    </tr>
    <tr><td>cell1</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell n</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
    </table>
    </div>
    </body>
    </html>