CSS 表格自适应+ 滚动条

最新推荐文章于 2024-09-20 16:09:38 发布

敢问敢答的码农妹子

最新推荐文章于 2024-09-20 16:09:38 发布

阅读量1.2k

点赞数

分类专栏： CSS 文章标签： css 前端 css3 html

本文链接：https://blog.csdn.net/qq_22243075/article/details/131803726

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

.table-container{width: 100%;overflow-y: auto;_overflow: auto;margin: 0 0 1em;}
.table-container table{border:0; border-collapse:collapse;}
.table-container table td,table th{border:1px solid #eee; padding:.5em 1em}
.table-container::-webkit-scrollbar{-webkit-appearance: none;width: 14px;height: 14px;}
.table-container::-webkit-scrollbar-thumb{border-radius: 8px;border: 3px solid #fff;background-color: rgba(0, 0, 0, .3);}

HTML 代码

<div class="table-container">
    <table>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
         .
         .
         .
         .
         <tr>
            ....
         </tr>
    </table>

表格超过屏幕后底部添加滚动条，可以拖动显示真个表格。