table設置表格有滾動條

時間 2019-11-13

標籤 table 設置表格滾動條简体版

原文原文鏈接

table 設置表格有滾動條。html

少說多作，代碼中有註釋：ui

 1 <!DOCTYPE HTML>
 2 <html>
 3 
 4     <head>
 5         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 6         <title>設置表格有滾動條</title>
 7         <style>
 8             * {
 9                 margin: 0;
10                 padding: 0;
11             }
12             
13             table {
14                 /*設置相鄰單元格的邊框間的距離*/
15                 border-spacing: 0;
16                 /*表格設置合併邊框模型*/
17                 border-collapse: collapse;
18                 text-align: center;
19             }
20             /*關鍵設置 tbody出現滾動條*/
21             table tbody {
22                 display: block;
23                 height: 80px;
24                 overflow-y: scroll;
25             }
26             
27             table thead,
28             tbody tr {
29                 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     </head>
45 
46     <body>
47         <table width="80%" border="1">
48             <thead>
49                 <tr>
50                     <th>姓名</th>
51                     <th>年齡</th>
52                     <th>出生年月</th>
53                     <th>手機號碼</th>
54                     <th>單位</th>
55                 </tr>
56             </thead>
57             <tbody>
58                 <tr>
59                     <td>張三</td>
60                     <td>18</td>
61                     <td>1990-9-9</td>
62                     <td>13682299090</td>
63                     <td>阿里巴巴</td>
64                 </tr>
65                 <tr>
66                     <td>李四</td>
67                     <td>18</td>
68                     <td>1990-9-9</td>
69                     <td>13682299090</td>
70                     <td>阿里巴巴與四十大盜</td>
71                 </tr>
72                 <tr>
73                     <td>王五</td>
74                     <td>18</td>
75                     <td>1990-9-9</td>
76                     <td>13682299090</td>
77                     <td>騰訊科技</td>
78                 </tr>
79                 <tr>
80                     <td>孟想</td>
81                     <td>18</td>
82                     <td>1990-9-9</td>
83                     <td>13682299090</td>
84                     <td>瀏陽河就業</td>
85                 </tr>
86             </tbody>
87         </table>
88     </body>
89 
90 </html>

效果：spa

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。