[英]header alignment issue - unable to fix
我想固定html表標題,以便在用戶滾動標題時仍能看到它。 我正在使用引導程序來顯示模式窗口。 我嘗試使用CSS,標頭已固定,但標頭對齊不正確。 我知道它非常簡單,但是無法解決標題對齊問題。 請在此處找到示例代碼
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>
寬度是必需的。 每個標題在我的應用程序中具有不同的寬度,因此我應該在<th>
分配該寬度
如果您使用引導程序,請嘗試以下<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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.