相对于另一个的定位元素，相对于窗口的绝对位置

Question

我的桌子上有导航按钮。 表格宽度可能会超出容器div的宽度，并且可以滚动。

问题出在按钮上：我希望它们相对于桌子，并紧靠桌子站立，但另一方面，当桌子的宽度大于屏幕宽度时，我不希望它们被隐藏。

我怎样才能做到这一点？

HTML：

<div id="tableResizeBar" overflow-x="auto"></div>
<div id="testsAreaDiv" style="height: 100%; position: absolute;">
  <div id="Table_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">
     //table
     <table id="TestsToExecTable" class="display nowrap dataTable no-footer JColResizer JCLRFlex" 
    cellspacing="0" role="grid" table-layout="fixed" style="position: relative; width: 1267px;"> … 
     </table>
     <div class="dataTables_paginate  paging_simple_numbers" id="TestsToExecTable_paginate">
       //buttons
        <ul class="pagination" style="    right: 10px;    bottom:  30px;">
            <li class="paginate_button previous disabled" aria-controls="TestsToExecTable" id="TestsToExecTable_previous">
              <a href="#">Previous</a>
            </li>
            <li class="paginate_button active" aria-controls="TestsToExecTable" tabindex="0">
              <a href="#">1</a>
            </li>
            <li class="paginate_button next disabled" aria-controls="TestsToExecTable" tabindex="0" id="TestsToExecTable_next">
               <a href="#">Next</a>
            </li>
        </ul>
    </div>
  </div>
</div>

CSS：

.dataTables_wrapper {
    position: relative;
    clear: both;
    zoom: 1;
}

.dataTables_wrapper:after {
    visibility: hidden;
    display: block;
    content: "";
    clear: both;
    height: 0;
}

TestsToExecTable {
    position: relative;
    table-layout: fixed;
    float: left;
    overflow: hidden;
}

.dataTables_wrapper .dataTables_paginate {
    float: none;
    right: 4px;
    padding: 0px;
}

.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 3px;
    margin-bottom: 15px;
    border-radius: 4px;
}

jsfiddle中的示例

非常感谢！

Answer 1

在表格尺寸中使用%代替px

HTML

<section id="playList" class="col-sm-6 col-md-8 no-padd">
<div id="tableResizeBar" overflow-x="auto"></div>
<div id="testsAreaDiv">
    <div id="Table_wrapper" class="dataTables_wrapper table-responsive form-inline dt-bootstrap no-footer">
    <!--table -->
    <table id="TestsToExecTable" class="display nowrap dataTable no-footer JColResizer JCLRFlex" cellspacing="0" role="grid" table-layout="fixed" style="position: relative; width: 100%;"> 
           <thead>
             <tr role="row">
               <th rowspan="1" colspan="1" column-no="0" style="width: 5%;" aria-sort="ascending"></th>
               <th rowspan="1" colspan="1" column-no="1" style="width: 5%;">
                 <input type="checkbox" value="select all" id="selectAll" name="selectAll" onclick="cbMasterClick()" checked="checked">
               </th>
               <th rowspan="1" colspan="1" column-no="2" style="max-width: 20%;text-align:left">Name</th>
               <th rowspan="1" colspan="1" column-no="2" style="max-width: 20%;text-align:left">Pass Score</th>
             </tr>
            </thead>
            <tbody>
              <tr role="row" class="odd">
                <td >1</td>
                <td class=" dt-body-center dt-head-center">
                  <input onclick="cbClick('exec-ID.0')" type="checkbox" class="testCB" name="b1" value="Active" checked="checked">
                </td>
                <td class=" left-align">Example Test</td>
                <td class=" left-align">75%</td>
                </tr>
              </tbody>
       </table>
    <div class="dataTables_paginate  paging_simple_numbers"  id="TestsToExecTable_paginate">
        <!-- buttons -->
            <ul class="pagination" style="    right: 10px;    bottom:  30px;">
                <li class="paginate_button previous disabled" aria-controls="TestsToExecTable" id="TestsToExecTable_previous">
                    <a href="#">Previous</a>
                </li>
                <li class="paginate_button active" aria-controls="TestsToExecTable" tabindex="0">
                    <a href="#">1</a>
                </li>
                <li class="paginate_button next disabled" aria-controls="TestsToExecTable" tabindex="0" id="TestsToExecTable_next">
                   <a href="#">Next</a>
                </li>
            </ul>
    </div>
  </div>
</div>
</section>

CSS

.dataTables_wrapper {
position: relative;
clear: both;
zoom: 1;
}
.dataTables_wrapper:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
TestsToExecTable {
position: relative;
table-layout: fixed;
float: left;
overflow: hidden;
}
.dataTables_wrapper .dataTables_paginate {
float: none;
right: 4px;
padding: 0px;
}
.pagination {
display: inline-block;
padding-left: 0;
margin: 3px;
margin-bottom: 15px;
border-radius: 4px;
}
#playList{
height: 100%;
margin: 0px;
background-color: #b1babf;
border-left-color: rgb(6, 68, 110);
border-left-style: solid;
border-left-width: 1px;
box-shadow: -2px 0px 14px rgb(19, 50, 82);
overflow: auto;
}

小提琴的例子