表格固定头部，tbody滚动

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

原创最新推荐文章于 2024-09-20 16:09:38 发布 · 178 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #vue

功能专栏收录该内容

25 篇文章

订阅专栏

本文详细介绍了一种使用HTML和CSS实现响应式表格布局的方法，包括如何设置表格样式、使用固定头部以及滚动主体部分，确保表格在不同屏幕尺寸下都能保持良好的阅读体验。

html

<table class="table" cellspacing="0" cellpadding="0">
    <thead class="fixedThead">
       <th>学号</th>
       <th>姓名</th>
       <th>年龄</th>
     </thead>
     <tbody class="scrollTbody">
         <tr>
           <td>001</td>
           <td>张三</td>
           <td>15</td>
         </tr>
      </tbody>
 </table>

css

.table thead {
  background: #f8f8f8;
}
.table {
  width: 96vw;
  border-collapse: collapse;
  border-spacing: 0;
}
.fixedThead {
  display: block;
}
.scrollTbody {
  width: 96vw;
  display: block;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.table td,
.table th {
  border-bottom: none;
  border-left: none;
  padding: 2px 3px 3px 4px;
}
.table thead th {
  width: 20vw;
  border: 1px solid #f1f1f1;
  padding-left: 3vw;
}
.table tbody td {
  width: 20vw;
}
.table tr:nth-child(even) {
  background: #f6fcfa;
}
.table tr:nth-child(odd) {
  background: #ffffff;
}