Question

我想修复html表头，以便在用户滚动标题时仍然可以看到。我使用bootstrap来显示模态窗口。我尝试使用CSS，标题正在修复，但标题对齐不正确。我知道它很直接，但无法解决标题对齐问题。请找到示例代码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>中的宽度是必需的。我的应用程序中每个标题的宽度都不同，因此我应该在<th>

中指定该宽度

Answer 1

如果你使用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>

Bootstrap/tables

标题对齐问题 - 无法修复

1 个答案: