我有一张桌子，我正在使用溢出功能在其中添加滚动条。
问题是thead和tbody之间的对齐方式受到干扰。这是代码段。
tbody {
display: block;
max-height: 500px;
overflow: auto;
width: 100%;
}<table id="treeMapCages" class="table table-striped table-bordered dataTable no-footer" role="grid" aria-describedby="treeMapCages_info">
<thead>
<tr role="row">
<th class="small text-muted text-uppercase dt-body-center sorting_asc" tabindex="0" aria-controls="treeMapCages" rowspan="1" colspan="1" aria-label="
: activate to sort column descending" style="width: 5%;" aria-sort="ascending">
<div class="pretty p-default">
<input type="checkbox" class="editor-active js-select-all">
<div class="state">
<label></label>
</div>
</div>
</th>
<th class="small text-muted text-uppercase sorting" tabindex="0" aria-controls="treeMapCages" rowspan="1" colspan="1" aria-label="Cage Name: activate to sort column ascending" style="width: 600px;"><strong>Storage Unit</strong></th>
<th class="small text-muted text-uppercase center sorting" tabindex="0" aria-controls="treeMapCages" rowspan="1" colspan="1" aria-label="Edit/Delete: activate to sort column ascending" style="width: 10%;"><strong>Actions</strong></th>
</tr>
</thead>
<tbody>
<tr id="4" role="row" class="odd">
<td class="dt-body-center sorting_1">
<div class="pretty p-default">
<input type="checkbox" name="SelectedTagsToAssign" class="editor-active" value="4">
<div class="state">
<label></label>
</div>
</div>
</td>
<td>Storage1</td>
<td class=" center"><a href="" class="editor_edit" id="4">Edit</a> <a href="" class="editor_remove" id="4">Delete</a></td>
</tr>
<tr id="5" role="row" class="even">
<td class="dt-body-center sorting_1">
<div class="pretty p-default">
<input type="checkbox" name="SelectedTagsToAssign" class="editor-active" value="5">
<div class="state">
<label></label>
</div>
</div>
</td>
<td>Storage2</td>
<td class=" center"><a href="" class="editor_edit" id="5">Edit</a> <a href="" class="editor_remove" id="5">Delete</a></td>
</tr>
<tr id="6" role="row" class="odd">
<td class="dt-body-center sorting_1">
<div class="pretty p-default">
<input type="checkbox" name="SelectedTagsToAssign" class="editor-active" value="6">
<div class="state">
<label></label>
</div>
</div>
</td>
<td>RandomStorage1</td>
<td class=" center"><a href="" class="editor_edit" id="6">Edit</a> <a href="" class="editor_remove" id="6">Delete</a></td>
</tr>
<tr id="7" role="row" class="even">
<td class="dt-body-center sorting_1">
<div class="pretty p-default">
<input type="checkbox" name="SelectedTagsToAssign" class="editor-active" value="7">
<div class="state">
<label></label>
</div>
</div>
</td>
<td>Storage3</td>
<td class=" center"><a href="" class="editor_edit" id="7">Edit</a> <a href="" class="editor_remove" id="7">Delete</a></td>
</tr>
<tr id="8" role="row" class="odd">
<td class="dt-body-center sorting_1">
<div class="pretty p-default">
<input type="checkbox" name="SelectedTagsToAssign" class="editor-active" value="8">
<div class="state">
<label></label>
</div>
</div>
</td>
<td>RandomStorage2</td>
<td class=" center"><a href="" class="editor_edit" id="8">Edit</a> <a href="" class="editor_remove" id="8">Delete</a></td>
</tr>
<tr id="9" role="row" class="even">
<td class="dt-body-center sorting_1">
<div class="pretty p-default">
<input type="checkbox" name="SelectedTagsToAssign" class="editor-active" value="9">
<div class="state">
<label></label>
</div>
</div>
</td>
<td>Storage4</td>
<td class=" center"><a href="" class="editor_edit" id="9">Edit</a> <a href="" class="editor_remove" id="9">Delete</a></td>
</tr>
<tr id="10" role="row" class="odd">
<td class="dt-body-center sorting_1">
<div class="pretty p-default">
<input type="checkbox" name="SelectedTagsToAssign" class="editor-active" value="10">
<div class="state">
<label></label>
</div>
</div>
</td>
<td>Storage5</td>
<td class=" center"><a href="" class="editor_edit" id="10">Edit</a> <a href="" class="editor_remove" id="10">Delete</a></td>
</tr>
<tr id="11" role="row" class="even">
<td class="dt-body-center sorting_1">
<div class="pretty p-default">
<input type="checkbox" name="SelectedTagsToAssign" class="editor-active" value="11">
<div class="state">
<label></label>
</div>
</div>
</td>
<td>Storage6</td>
<td class=" center"><a href="" class="editor_edit" id="11">Edit</a> <a href="" class="editor_remove" id="11">Delete</a></td>
</tr>
<tr id="12" role="row" class="odd">
<td class="dt-body-center sorting_1">
<div class="pretty p-default">
<input type="checkbox" name="SelectedTagsToAssign" class="editor-active" value="12">
<div class="state">
<label></label>
</div>
</div>
</td>
<td>Storage7</td>
<td class=" center"><a href="" class="editor_edit" id="12">Edit</a> <a href="" class="editor_remove" id="12">Delete</a></td>
</tr>
<tr id="13" role="row" class="even">
<td class="dt-body-center sorting_1">
<div class="pretty p-default">
<input type="checkbox" name="SelectedTagsToAssign" class="editor-active" value="13">
<div class="state">
<label></label>
</div>
</div>
</td>
<td>Storage8</td>
<td class=" center"><a href="" class="editor_edit" id="13">Edit</a> <a href="" class="editor_remove" id="13">Delete</a></td>
</tr>
<tr id="14" role="row" class="odd">
<td class="dt-body-center sorting_1">
<div class="pretty p-default">
<input type="checkbox" name="SelectedTagsToAssign" class="editor-active" value="14">
<div class="state">
<label></label>
</div>
</div>
</td>
<td>Storage9</td>
<td class=" center"><a href="" class="editor_edit" id="14">Edit</a> <a href="" class="editor_remove" id="14">Delete</a></td>
</tr>
<tr id="15" role="row" class="even">
<td class="dt-body-center sorting_1">
<div class="pretty p-default">
<input type="checkbox" name="SelectedTagsToAssign" class="editor-active" value="15">
<div class="state">
<label></label>
</div>
</div>
</td>
<td>Storage10</td>
<td class=" center"><a href="" class="editor_edit" id="15">Edit</a> <a href="" class="editor_remove" id="15">Delete</a></td>
</tr>
</tbody>
</table>
答案 0 :(得分：1)
我从th去除了宽度
.table tbody {
display: block;
max-height: 300px;
overflow-y: scroll;
}
.table thead,
tbody tr {
display: table;
width: 100%;
table-layout: fixed;
text-align: left
}<table id="treeMapCages" class="table table-striped table-bordered dataTable no-footer" role="grid" aria-describedby="treeMapCages_info">
<thead>
<tr role="row">
<th class="small text-muted text-uppercase dt-body-center sorting_asc" tabindex="0" aria-controls="treeMapCages" rowspan="1" colspan="1" aria-label=": activate to sort column descending" aria-sort="ascending">
<div class="pretty p-default">
<input type="checkbox" class="editor-active js-select-all">
<div class="state">
<label></label>
</div>
</div>
</th>
<th class="small text-muted text-uppercase sorting" tabindex="0" aria-controls="treeMapCages" rowspan="1" colspan="1" aria-label="Cage Name: activate to sort column ascending" ><strong>Storage Unit</strong></th>
<th class="small text-muted text-uppercase center sorting" tabindex="0" aria-controls="treeMapCages" rowspan="1" colspan="1" aria-label="Edit/Delete: activate to sort column ascending" ><strong>Actions</strong></th>
</tr>
</thead>
<tbody>
<tr id="4" role="row" class="odd">
<td class="dt-body-center sorting_1">
<div class="pretty p-default">
<input type="checkbox" name="SelectedTagsToAssign" class="editor-active" value="4">
<div class="state">
<label></label>
</div>
</div>
</td>
<td>Storage1</td>
<td class=" center"><a href="" class="editor_edit" id="4">Edit</a> <a href="" class="editor_remove" id="4">Delete</a></td>
</tr>
<tr id="5" role="row" class="even">
<td class="dt-body-center sorting_1">
<div class="pretty p-default">
<input type="checkbox" name="SelectedTagsToAssign" class="editor-active" value="5">
<div class="state">
<label></label>
</div>
</div>
</td>
<td>Storage2</td>
<td class=" center"><a href="" class="editor_edit" id="5">Edit</a> <a href="" class="editor_remove" id="5">Delete</a></td>
</tr>
<tr id="6" role="row" class="odd">
<td class="dt-body-center sorting_1">
<div class="pretty p-default">
<input type="checkbox" name="SelectedTagsToAssign" class="editor-active" value="6">
<div class="state">
<label></label>
</div>
</div>
</td>
<td>RandomStorage1</td>
<td class=" center"><a href="" class="editor_edit" id="6">Edit</a> <a href="" class="editor_remove" id="6">Delete</a></td>
</tr>
<tr id="7" role="row" class="even">
<td class="dt-body-center sorting_1">
<div class="pretty p-default">
<input type="checkbox" name="SelectedTagsToAssign" class="editor-active" value="7">
<div class="state">
<label></label>
</div>
</div>
</td>
<td>Storage3</td>
<td class=" center"><a href="" class="editor_edit" id="7">Edit</a> <a href="" class="editor_remove" id="7">Delete</a></td>
</tr>
<tr id="8" role="row" class="odd">
<td class="dt-body-center sorting_1">
<div class="pretty p-default">
<input type="checkbox" name="SelectedTagsToAssign" class="editor-active" value="8">
<div class="state">
<label></label>
</div>
</div>
</td>
<td>RandomStorage2</td>
<td class=" center"><a href="" class="editor_edit" id="8">Edit</a> <a href="" class="editor_remove" id="8">Delete</a></td>
</tr>
<tr id="9" role="row" class="even">
<td class="dt-body-center sorting_1">
<div class="pretty p-default">
<input type="checkbox" name="SelectedTagsToAssign" class="editor-active" value="9">
<div class="state">
<label></label>
</div>
</div>
</td>
<td>Storage4</td>
<td class=" center"><a href="" class="editor_edit" id="9">Edit</a> <a href="" class="editor_remove" id="9">Delete</a></td>
</tr>
<tr id="10" role="row" class="odd">
<td class="dt-body-center sorting_1">
<div class="pretty p-default">
<input type="checkbox" name="SelectedTagsToAssign" class="editor-active" value="10">
<div class="state">
<label></label>
</div>
</div>
</td>
<td>Storage5</td>
<td class=" center"><a href="" class="editor_edit" id="10">Edit</a> <a href="" class="editor_remove" id="10">Delete</a></td>
</tr>
<tr id="11" role="row" class="even">
<td class="dt-body-center sorting_1">
<div class="pretty p-default">
<input type="checkbox" name="SelectedTagsToAssign" class="editor-active" value="11">
<div class="state">
<label></label>
</div>
</div>
</td>
<td>Storage6</td>
<td class=" center"><a href="" class="editor_edit" id="11">Edit</a> <a href="" class="editor_remove" id="11">Delete</a></td>
</tr>
<tr id="12" role="row" class="odd">
<td class="dt-body-center sorting_1">
<div class="pretty p-default">
<input type="checkbox" name="SelectedTagsToAssign" class="editor-active" value="12">
<div class="state">
<label></label>
</div>
</div>
</td>
<td>Storage7</td>
<td class=" center"><a href="" class="editor_edit" id="12">Edit</a> <a href="" class="editor_remove" id="12">Delete</a></td>
</tr>
<tr id="13" role="row" class="even">
<td class="dt-body-center sorting_1">
<div class="pretty p-default">
<input type="checkbox" name="SelectedTagsToAssign" class="editor-active" value="13">
<div class="state">
<label></label>
</div>
</div>
</td>
<td>Storage8</td>
<td class=" center"><a href="" class="editor_edit" id="13">Edit</a> <a href="" class="editor_remove" id="13">Delete</a></td>
</tr>
<tr id="14" role="row" class="odd">
<td class="dt-body-center sorting_1">
<div class="pretty p-default">
<input type="checkbox" name="SelectedTagsToAssign" class="editor-active" value="14">
<div class="state">
<label></label>
</div>
</div>
</td>
<td>Storage9</td>
<td class=" center"><a href="" class="editor_edit" id="14">Edit</a> <a href="" class="editor_remove" id="14">Delete</a></td>
</tr>
<tr id="15" role="row" class="even">
<td class="dt-body-center sorting_1">
<div class="pretty p-default">
<input type="checkbox" name="SelectedTagsToAssign" class="editor-active" value="15">
<div class="state">
<label></label>
</div>
</div>
</td>
<td>Storage10</td>
<td class=" center"><a href="" class="editor_edit" id="15">Edit</a> <a href="" class="editor_remove" id="15">Delete</a></td>
</tr>
</tbody>
</table>