Question

我一直在处理一个包含100多个这样的表的Web应用程序： -

其中一些表有许多单元格离开我的页面并滚动整个页面并破坏其设计而有些则没有。

我想使用jquery仅在其单元格大于页面宽度和高度时自动滚动此表x和y。滚动仅适用于此情况。我尝试使用 css ，但这使得没有滚动问题的表看起来很难看。

任何人都可以帮忙吗

<table class="DisplayTable table  table-striped table-images table-bordered" id="FormTable">
<tbody><tr>
  <th nowrap="nowrap" class="DisplayTableHeaders"><a href="/noms/tx_flag_confirmed.php?ob=FromPOP">From POP</a></th>
  <th nowrap="nowrap" class="DisplayTableHeaders"><a href="/noms/tx_flag_confirmed.php?ob=ToPOP">To POP</a></th>
  <th nowrap="nowrap" class="DisplayTableHeaders"><a href="/noms/tx_flag_confirmed.php?ob=TxType">Tx Type</a></th>
  <th nowrap="nowrap" class="DisplayTableHeaders"><a href="/noms/tx_flag_confirmed.php?ob=Customer">Customer</a></th>
  <th nowrap="nowrap" class="DisplayTableHeaders"><a href="/noms/tx_flag_confirmed.php?ob=FromPOP">Date Available</a></th>
  <th nowrap="nowrap" class="DisplayTableHeaders"><a href="/noms/tx_flag_confirmed.php?ob=UserRequired">Required By</a></th>
  <th nowrap="nowrap" class="DisplayTableHeaders"><a href="/noms/tx_flag_confirmed.php?ob=RequestNumber">Request Number</a></th>
 <tr onclick="Highlight(this, '', '#fff')">
  <td nowrap="nowrap" class="DisplayTableCells">RODA ... C-EG</td>
  <td nowrap="nowrap" class="DisplayTableCells">MARAZIQ ... GZ-EG</td>
  <td nowrap="nowrap" class="DisplayTableCells">GBEthernet</td>
  <td nowrap="nowrap" class="DisplayTableCells">SDHProtect-MSAN-Payload-3-STM1</td>
  <td nowrap="nowrap" class="DisplayTableCells">18-Feb-2015</td>
  <td nowrap="nowrap" class="DisplayTableCells">ahmed.mabdelsatar</td>
  <td nowrap="nowrap" class="DisplayTableCells">ORD-130745-Y1X9M6</td>
  <td nowrap="nowrap" class="DisplayTableCells">5620073</td><td nowrap="nowrap" class="DisplayTableCells">No</td>
  <td nowrap="nowrap" class="DisplayTableCells">
    <input type="text" onfocus="blur()" size="8" maxlength="11" name="DCD_35671" id="DCD_35671">&nbsp;
    <a href="javascript:NewCal('DCD_35671','ddmmmyyyy')">
    <img width="16" height="16" border="0" alt="Pick a date" src="images/cal.gif"></a></td>
  <td nowrap="nowrap" class="DisplayTableCells">
   <input type="hidden" value="35671" name="id"><input type="hidden" value="1421587294" name="DateRequired">
   <input type="submit" border="0" class="btn btn-primary" value="Confirm"></td>
</tr>
</table>

Answer 1

您可以使用jquery height()函数来确定元素的高度。

例如：

var tableHeight = $('table').height();
var bodyHeight = $('body').height();

然后，您需要根据这些值制定逻辑以进行滚动。

当其单元格大于主体宽度和高度时，表格自动滚动

1 个答案: