html - 修复表头并使表体滚动
问题描述
我在 Angular 项目中工作,但遇到了设计问题
我想滚动表格的主体,使主体标题固定
我试图做 at 但不能只滚动表体
我的代码和设计已准备就绪,我已将其放在下面的链接中 -
https://stackblitz.com/edit/angular-x8c89j?file=src%2Fapp%2Fapp.component.html
解决方案
请更新您的表格样式如下
table {
width: 100%;
}
table, td {
border-collapse: collapse;
border: 1px solid #000;
}
thead {
display: table;
width: calc(100% - 17px);
}
tbody {
display: block;
max-height: 200px;
overflow-y: scroll;
}
th, td {
padding: 5px;
word-break: break-all;
}
tr {
display: table;
width: 100%;
box-sizing: border-box;
}
td {
text-align: center;
border-bottom: none;
border-left: none;
}
tr th:first-child,
tr td:first-child {
width: 100px;
}
推荐阅读
- c++ - 在作用域生命周期之前调用的 C++ 析构函数
- c++ - 如何创建一个没有菜单、栏、框架、3D 效果等的窗口,并且与另一个窗口的大小完全相同?
- elasticsearch - 正文未在 fireFox RESTClient 中发送
- django - s3boto 和预签名的 s3 url
- google-cloud-platform - 有什么方法可以让 GCP 服务帐户访问 GCS 存储桶中的特定文件夹?
- javascript - 在通过 Node 将结果转录到 Google Sheets API 之前,如何使用 Javascript 按 exceljs 中的列进行过滤
- ruby-on-rails - 依赖Rails数组的整数属性
- python - `plt.figure` 导致空输出
- java - 当我将用户发送到另一个活动时,它会一次又一次地重新加载到无穷无尽的时间
- blogger - 如何将我的博主帖子的特色图片关联为我网站中的缩略图