如何创建宽度为100%的表格,并在HTML表格主体内部垂直滚动?

2021年4月10日12:55:20 发表评论 898 次浏览

本文的方法是使用width属性创建宽度为100%的表, 并使用overflow-y属性创建表体内的垂直滚动。 Overflow属性用于在表中创建滚动条。使用显示:块;属性以显示块级元素。由于更改了tbody的显示属性, 因此我们也应该更改thead元素的属性, 以防止破坏表格布局。

例子:

<!DOCTYPE html>
<html>
  
<head>
     <title>
         Display table with vertical scrollbar
     </title>
  
     <style>
         table.scrolldown {
             width: 100%;
              
             /* border-collapse: collapse; */
             border-spacing: 0;
             border: 2px solid black;
         }
          
         /* To display the block as level element */
         table.scrolldown tbody, table.scrolldown thead {
             display: block;
         } 
          
         thead tr th {
             height: 40px; 
             line-height: 40px;
         }
          
         table.scrolldown tbody {
              
             /* Set the height of table body */
             height: 50px; 
              
             /* Set vertical scroll */
             overflow-y: auto;
              
             /* Hide the horizontal scroll */
             overflow-x: hidden; 
         }
          
         tbody { 
             border-top: 2px solid black;
         }
          
         tbody td, thead th {
             width : 200px;
             border-right: 2px solid black;
         }
         td {
             text-align:center;
         }
     </style>
</head>
  
<body>
     <table class = "scrolldown">
          
         <!-- Table head content -->
         <thead>
             <tr>
                 <th>Heading 1</th>
                 <th>Heading 2</th>
                 <th>Heading 3</th>
                 <th>Heading 4</th>
                 <th>Heading 5</th>
             </tr>
         </thead>
          
         <!-- Table body content -->
         <tbody>
             <tr>
                 <td>Content</td>
                 <td>Content</td>
                 <td>Content</td>
                 <td>Content</td>
                 <td>Content</td>
             </tr>
              
             <tr>
                 <td>Content</td>
                 <td>Content</td>
                 <td>Content</td>
                 <td>Content</td>
                 <td>Content</td>
             </tr>
             <tr>
                 <td>Content</td>
                 <td>Content</td>
                 <td>Content</td>
                 <td>Content</td>
                 <td>Content</td>
             </tr>
         </tbody>
     </table>
<body>
      
</html>

输出如下:

如何创建宽度为100%的表格,并在HTML表格主体内部垂直滚动?1

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: