详解table设置表格有滚动条实例

PHP中文网 • 2025年4月1日 03:24:31 • 编程技术 • 阅读 1

table 设置表格有滚动条。

少说多做，代码中有注释：

 1        6          设置表格有滚动条 7           8              * { 9                 margin: 0;                  padding: 0;11             }              table {                             /*设置相邻单元格的边框间的距离*/                               border-spacing: 0;16                 /*表格设置合并边框模型*/                              border-collapse: collapse;18                                     text-align: center;19             }                              /*关键设置 tbody出现滚动条*/21             table tbody {                                     display: block;23                                                   height: 80px;                                                 overflow-y: scroll;25             }                                           table thead,                                                       tbody tr {                                                                                                                display: table;30                 width: 100%;31                                                                                                                                table-layout: fixed;32             }33             /*关键设置：滚动条默认宽度是16px 将thead的宽度减16px*/34             table thead {35                 width: calc( 100% - 1em)36             }37             38             39             table thead th {40                 background: #ccc;41             }42             43         44     45 46     47         48             49                 50                     51                     52                     53                     54                     55                 56             57             58                 59                     60                     61                     62                     63                     64                 65                 66                     67                     68                     69                     70                     71                 72                 73                     74                     75                     76                     77                     78                 79                 80                     81                     82                     83                                                                             85                                                                         86                                                                     87                                                                 姓名 年龄 出生年月 手机号码 单位
张三 18 1990-9-9 13682299090 阿里巴巴
李四 18 1990-9-9 13682299090 阿里巴巴与四十大盗
王五 18 1990-9-9 13682299090 腾讯科技
孟想 18 1990-9-9 13682299090                                                                                                                                     浏阳河就业
88     89 90

姓名	年龄	出生年月	手机号码	单位
张三	18	1990-9-9	13682299090	阿里巴巴
李四	18	1990-9-9	13682299090	阿里巴巴与四十大盗
王五	18	1990-9-9	13682299090	腾讯科技
孟想	18	1990-9-9	13682299090	浏阳河就业