我想固定 html 表头,这样当用户滚动时仍然可以看到表头。我正在使用 Bootstrap 来显示模态窗口。我尝试使用 css, header 已修复但 header 对齐不正确。我知道它非常简单,但无法解决标题对齐问题。请查找示例代码 here
html代码:
<div class="modal-body" id="modal-body">
<table id="myTable" class="table table-fixedheader table-bordered table-striped"> <thead>
<tr>
<th style="width:14%;">Header1<th><th style="width:12%;">Header2</th><th style="width:19%;">Header3</th><th style="width:16%;">Header4</th>
</tr></thead><tbody>
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
...</tbody></table>
CSS 代码:
.modal-body {
max-height: calc(100vh - 210px);
overflow-y: auto;
}
table {
width: 100%;
}
thead, tbody, tr, td, th { display: block; }
tr:after {
content: ' ';
display: block;
visibility: hidden;
clear: both;
}
thead th {
height: 30px;
/*text-align: left;*/
}
tbody {
height: 120px;
overflow-y: auto;
}
thead {
/* fallback */
}
tbody td, thead th {
width: 19.2%;
float: left;
}
注意:<th>
中的宽度是必须的。在我的应用程序中,每个 header 的宽度都不同,所以我应该在 <th>
中分配该宽度
最佳答案
如果你使用 bootstrap 试试这个
<tr class="row"><th class="col-md-4">Header1</th><th class="col-md-4">Header2</th><th class="col-md-4">Header3</th><th class="col-md-4">Header4</th></tr>
关于html - header 对齐问题 - 无法修复,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43565977/