html纯CSS固定table表头和列

纯CSS固定表头和列

<style>
#T_stocktable{
    display:block;
    overflow: auto;
    font-family: STKaiti;
    font-size:12px;
    color:#333333;
    height:300px;
    width:580px;
    min_width:240px;
    max_width:800px;
    border-width: 1px;
    border-color: #666666;
    margin:0;
    border-collapse:collapse;
}
#T_stocktable tbody {
    display:block;
    width:830px;
}

#T_stocktable>thead tr, #T_stocktable>tbody tr {
    display:table;
    table-layout:fixed;
}

#T_stocktable thead {
    display:block;
    top: 0px;
    width:830px;
    position: sticky;
    z-index: 2;
}
table#T_stocktable th{
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color: #dedede;
    font-weight:bold;
}
table#T_stocktable td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
}
table#T_stocktable td:nth-child(1) {
    background:#F5F5F5;
}
table#T_stocktable td:nth-child(2) {
    background:#F5F5F5;
}
table#T_stocktable td:nth-child(3) {
    background:#F5F5F5;
}
table#T_stocktable th:nth-child(1), table#T_stocktable td:nth-child(1) {
    border-left:0px;
    border-right:0px;
    position: sticky;
    text-align:center;
    width: 25px;
    min-width: 25px;
    max-width: 25px;
    left: 0px;
}
table#T_stocktable th:nth-child(2), table#T_stocktable td:nth-child(2) {
    border-left:0px;
    border-right:0px;
    position: sticky;
    text-align:center;
    width: 60px;
    min-width: 60px;
    max-width: 60px;
    left: 41px;
    
}
table#T_stocktable th:nth-child(3), table#T_stocktable td:nth-child(3) {
    border-left:0px;
    border-right:0px;
    position: sticky;
    text-align:center;
    width: 60px;
    min-width: 60px;
    max-width: 60px;
    left: 117px;
}

table#T_stocktable th:nth-child(4), table#T_stocktable td:nth-child(4) {
    text-align:center;
    width: 60px;
    min-width: 60px;
    max-width: 60px;
}
table#T_stocktable th:nth-child(5), table#T_stocktable td:nth-child(5) {
    text-align:center;
    width: 60px;
    min-width: 60px;
    max-width: 60px;
}
table#T_stocktable th:nth-child(6), table#T_stocktable td:nth-child(6) {
    text-align:center;
    width: 60px;
    min-width: 60px;
    max-width: 60px;
}
table#T_stocktable th:nth-child(7), table#T_stocktable td:nth-child(7) {
    text-align:center;
    width: 60px;
    min-width: 60px;
    max-width: 60px;
}
table#T_stocktable th:nth-child(8), table#T_stocktable td:nth-child(8) {
    text-align:center;
    width: 60px;
    min-width: 60px;
    max-width: 60px;
}
table#T_stocktable th:nth-child(9), table#T_stocktable td:nth-child(9) {
    text-align:center;
    width: 60px;
    min-width: 60px;
    max-width: 60px;
}
table#T_stocktable th:nth-child(10), table#T_stocktable td:nth-child(10) {
    text-align:center;
    width: 60px;
    min-width: 60px;
    max-width: 60px;
}
table#T_stocktable th:nth-child(11), table#T_stocktable td:nth-child(11) {
    text-align:center;
    width: 60px;
    min-width: 60px;
    max-width: 60px;
}
table#T_stocktable th:nth-child(12), table#T_stocktable td:nth-child(12) {
    text-align:center;
    width: 60px;
    min-width: 60px;
    max-width: 60px;
}
table#T_stocktable th:nth-child(13), table#T_stocktable td:nth-child(13) {
    text-align:center;
    width: 60px;
    min-width: 60px;
    max-width: 60px;
}
table#T_stocktable th:nth-child(14), table#T_stocktable td:nth-child(14) {
    text-align:center;
    width: 60px;
    min-width: 60px;
    max-width: 60px;
}
table#T_stocktable th:nth-child(15), table#T_stocktable td:nth-child(15) {
    text-align:center;
    width: 60px;
    min-width: 60px;
    max-width: 60px;
}
</style>
<table id="T_stocktable">
    <thead>
        <tr>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
                <tr>
                        <th>0</th>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
            </tr>
            <tr>
                        <th>1</th>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
            </tr>
            <tr>
                        <th>2</th>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
            </tr>
            <tr>
                        <th>3</th>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
            </tr>
            <tr>
                        <th>4</th>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
            </tr>
            <tr>
                        <th>5</th>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
            </tr>
            <tr>
                        <th>6</th>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
            </tr>
            <tr>
                        <th>7</th>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
            </tr>
            <tr>
                        <th>8</th>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
            </tr>
            <tr>
                        <th>9</th>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
            </tr>
            <tr>
                        <th>10</th>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
            </tr>
            <tr>
                        <th>11</th>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
            </tr>
            <tr>
                        <th>12</th>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
            </tr>
            <tr>
                        <th>13</th>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
            </tr>
            <tr>
                        <th>14</th>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
            </tr>
            <tr>
                        <th>15</th>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
            </tr>
            <tr>
                        <th>16</th>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
            </tr>
            <tr>
                        <th>17</th>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
            </tr>
            <tr>
                        <th>18</th>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
            </tr>
            <tr>
                        <th>19</th>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
            </tr>
            <tr>
                        <th>20</th>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
            </tr>
            <tr>
                        <th>21</th>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
            </tr>
    </tbody>
</table>