表格条件滚动条,并锁定表头

实现思路

1.在tbody标签上添加纵向滚动条
2.在table标签上条件横向滚动条
3.这样表格内容和表头会出现错位的现象.
4.我采取的办法是锁定单元格的固定宽度,最后一个单元格设置为自适应宽度,以缓冲多出来的滚动条的宽度.

code:

<style>
    .ctBody {
        /*该块元素前后带有换行符*/
        display:block;
        /*height:195px;*/
        /*设置表格内元素的滚动条*/
        overflow-y:scroll;
    }

    .ct thead, .ct tbody tr {
        /*该元素作为块级表格来显示*/
        display:table;
        width:100%;
        /*该元素列宽由表格宽度决定  ,很关键*/
        table-layout:fixed;
    }

    /*设置表头,内容最后一列宽度自适应*/
    .ct thead td:last-child , .ct tbody td:last-child{
        width:  auto;
    }

</style>