Question

我有带导航按钮的表格。表宽度可能会溢出容器div宽度并且可以滚动。

问题在于按钮：我希望他们相对于桌子并站在它后面，但是当桌子宽度大于屏幕时，我不希望它们被隐藏。

我该怎么做？

HTML：

@SystemSetup(extension = IwacockpitsConstants.EXTENSIONNAME)
public class IwaCockpitsSystemSetup{

    @SystemSetup(process = SystemSetup.Process.INIT, type = SystemSetup.Type.ESSENTIAL)
    public void method_1(){

        //will be executed during the initialization process when the essential data for extension iwacockpits is created.

    }

    @SystemSetup(process = SystemSetup.Process.INIT, type = SystemSetup.Type.PROJECT)
    public void method_2(){

        //will be executed during the initialization process while creation of project data for extension iwacockpits.

    }

    @SystemSetup(process = SystemSetup.Process.UPDATE, type = SystemSetup.Type.ESSENTIAL)
    public void method_3(){

        //will be executed during the update process when the essential data for extension iwacockpits is created.

    }

    @SystemSetup(process = SystemSetup.Process.UPDATE, type = SystemSetup.Type.PROJECT)
    public void method_4){

        //will be executed during the initialization process when the project data for extension iwacockpits is created.

    }

    @SystemSetup(process = SystemSetup.Process.ALL, type = SystemSetup.Type.ALL)
    public void method_5){

        //will be executed during creation of project data or essential data in the same extension, in both init and update.

    }

}

的CSS：

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

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

定位元素相对于另一个和绝对到窗口

1 个答案: