在向tbody添加滚动条后如何将tbody与thead对齐（显示：块）

Question

我有一张桌子，我正在使用溢出将滚动条添加到它的正文中。

问题是剧情和肢体之间的对齐方式受到干扰。 这是代码段。

 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> 

的jsfiddle

Answer 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>