我有导航按钮的表。表格宽度可能溢出容器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
非常感谢!
请在jsfiddle – Nitesh
上发布代码[here](https://jsfiddle.net/r1ustf6x/) –