定位元素相對於另一個和絕對的窗口

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; 
} 

例Fiddle