詳解table設定表格有捲軸實例

table 設定表格有捲軸。

少說多做，程式碼中有註解：

 1 nbsp;HTML> 
  
  
 <meta> 6         
 <title>设置表格有滚动条</title> 7         
 <style> 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         </style>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 

#效果：

 

以上是詳解table設定表格有捲軸實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！