css - 具有固定标题的引导表 - Angular 5
问题描述
我用 HTML 创建了一个表格,我想显示它的标题是固定的(滚动只会影响正文)。
我找到了一个解决方案,它几乎可以按我的意愿工作。
tbody {
display:block;
height:500px;
overflow:auto;
}
thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;/* even columns width , fix width of table too*/
}
thead {
width: calc( 100% - 1em )/* scrollbar is average 1em/16px width, remove it from thead width */
}
table {
width:400px;
}
问题是使用属性table-layout: fixed
,它修复了列的宽度,因此我的列没有正确显示(它们重叠):
我该如何解决?我已经尝试过表格布局的四个可能值
解决方案
采用td {word-wrap: break-word;}
tbody {
display:block;
height:500px;
overflow:auto;
}
thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;/* even columns width , fix width of table too*/
}
td{
word-wrap: break-word;
}
thead {
width: calc( 100% - 1em )/* scrollbar is average 1em/16px width, remove it from thead width */
}
table {
width:400px;
}
<table class="a">
<thead>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</thead>
<tbody>
<tr>
<td>AlfredsFutterkisteghrtrh</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</tbody>
</table>
推荐阅读
- r - 将R中一组点的边界作为多边形返回?
- javascript - 您如何在 jest 上执行重复的 jQuery ajax 调用以进行单元测试?
- javascript - 当任何 cypress 方法不起作用时如何处理 Cypress 中的拖放
- node.js - Nodejs,在所有功能或事件中为我的应用程序创建日志的更好方法是什么?
- flutter - 如何在文本字段上方显示提示文本
- javascript - 是否可以从 FIREBASE 存储中同步下载图像?并将其传递给 PNG.sync.read?
- python - 6.moves 中的关键错误,返回 sys.modules[fullname]
- antlr4 - ANTLR - 解析时如何在双引号字符串中接受双引号
- postgresql - 恢复 Postgres 数据库失败:用户密码验证失败
- javascript - 无法在 Windows 10 中执行脚本 docker-compose YML 文件