代码之家  ›  专栏  ›  技术社区  ›  Simsons

在向tbody添加滚动条后如何将tbody与AD对齐(显示:块)

  •  0
  • Simsons  · 技术社区  · 6 年前

    问题是车斗和车身之间的对齐受到干扰。以下是片段。

    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

    1 回复  |  直到 6 年前
        1
  •  1
  •   nourza    6 年前

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