文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >具有固定滚动行和固定滚动列的动态大小的大型html表

问具有固定滚动行和固定滚动列的动态大小的大型html表
EN

Stack Overflow用户
提问于 2012-06-01 01:53:42
回答 4查看 33.1K关注 0票数 51

我需要在网页上显示一个很大的表格，并且需要防止第一列和第一行滚动。我想动态设置此表格的垂直大小(在一些静态大小的页眉/页脚页面内容之间)，以使其尽可能高，而不会强制浏览器窗口具有垂直滚动条。

代码语言：javascript
复制
   browser window\/
+--------------------------------------------------------------+  /\
|   /\     /\  /\         /\       /\      /\     /\ /\        |  fixed static
|    web page header fields and text                           |  |  size
|   \/    \/   \/         \/       \/     \/     \/   \/       |__\/__
|               +----<<<table-scrollbar>>>>>----------------+  |  /\
|+--------------+--------+--------+--------+--------+-------+  |   |
||              |        |colspan |        |        | fixed |  |   |
||  fixed       |  fixed |  fixed | fixed  |  fixed | more> |  |   |
|+--------------+--+--+--+---+----+--+--+--+--------+-------++ |   |
||  fixed       |  |  |  |   |    |  |  |  |        |       || |   |
|+--------------+--+--+--+---+----+--+--+--+--------+-------+t |   |
||  fixed       |  |  |  |   |    |  |  |  |        |       |a |   |
|+--------------+--+--+--+---+----+--+--+--+--------+-------+b |   |
||  fixed       |  |  |  |   |    |  |  |  |        |       |l |   |
|+--------------+--+--+--+---+----+--+--+--+--------+-------+e |   set
||  fixed       |  |  |  |   |    |  |  |  |        |       || |   dynamic
||  multi-line  |  |  |  |   |    |  |  |  |        |       |s |   size at
|+--------------+--+--+--+---+----+--+--+--+--------+-------+c |   runtime
||  fixed       |  |  |  |   |    |  |  |  |        |       |r |   |
|+--------------+--+--+--+---+----+--+--+--+--------+-------+o |   |
||  fixed       |  |  |  |   |    |  |  |  |        |       |l |   |
|+--------------+--+--+--+---+----+--+--+--+--------+-------+l |   |
||  fixed       |  |  |  |   |    |  |  |  |        |       |b |   |
||              |  |  |  |   |    |  |  |  |        |       |a 
|+--------------+--+--+--+---+----+--+--+--+--------+-------+r |   |
|| fixed, moreV |  |  |  |   |    |  |  |  |        |       || |   |
|+--------------+--+--+--+---+----+--+--+--+--------+-------++ |__\/__
|   /\     /\  /\         /\       /\      /\     /\ /\        |  /\
|    web page footer fields and text                           |  fixed static
|   \/    \/   \/         \/       \/     \/     \/   \/       |  |  size
+--------------------------------------------------------------+  \/

这只需要在现代浏览器中工作，使用all/any: html、css、javascript、jquery

重要性顺序：

具有许多表单字段、隐藏值、

  • 折叠行等的
  • 复杂表格稍后我将添加
  • 第1行将具有可变高度
  • 第1行:固定自垂直滚动，但可滚动

列:固定自水平滚动，但可滚动vertical

  • dynamically大小此“表”以填充屏幕之间的静态大小滚动条页眉/页脚html
  • location (如上面的ascii图片所示)并不重要。

<

  • >F218

这是一个非常基本的html屏幕示例，没有任何滚动/调整大小的功能：

代码语言：javascript
复制
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>big scrolling table example</TITLE>
</HEAD>

<BODY>
  <form name="MyForm" method="POST" action="">
    <!-- static size header junk--><!-- static size header junk--><!-- static size header junk-->
    <table border="1" width="100%" cellspacing="1" cellpadding="0" align="center">
    <tr>
    <td width="35%" align="left">header junk left</td>
    <td >- HEADER JUNK MIDDLE -</td>
    <td width="35%" align="right">header junk right</td>
    </tr>
    </table>
    <br>
    <table border="0" width="95%" cellspacing="1" cellpadding="0" align="center">
    <tr>
    <td width="60%" align="left">header junk left</td>
    <td width="40%" align="right">check it out! <input type="checkbox" onchange="alert('your javascript here');" value="Y" name="checkitout"></td>
    </tr>


    <!-- big table here!!--><!-- big table here!!--><!-- big table here!!--><!-- big table here!!-->

    <table border="1" width="95%" cellspacing="1" cellpadding="0" align="center">
    <tr>
    <td>fixed can be long<br>or short</td>
    <td colspan="4">scroll A</td>
    <td colspan="2">scroll B</td>
    <td >scroll C</td>
    <td colspan="4">scroll D</td>
    <td colspan="2">scroll E</td>
    <td >scroll F</td>
    <td colspan="4">scroll G</td>
    <td colspan="2">scroll H</td>
    <td >scroll I</td>
    <td colspan="4">scroll J</td>
    <td colspan="2">scroll K</td>
    <td >scroll L</td>
    <td colspan="4">scroll M</td>
    <td colspan="2">scroll N</td>
    <td >scroll O</td>
    </tr>

    <tr>
        <td>fixed 2</td>
        <td>1 1 1 1 1 A</td><td>2 2 2 2 2 A</td><td>3 3 3 3 3 A</td><td>4 4 4 4 4 A</td>
        <td>1 B</td><td>2 B</td>
        <td >1 C</td>
        <td>1 D</td><td>2 D</td><td>3 D</td><td>4 D<br>more...</td>
        <td>1 E</td><td>2 E</td>
        <td >1 F</td>
        <td>1 1 1 G</td><td>2 2 G</td><td>3 G</td><td>4 4 4 4 G</td>
        <td>1 H</td><td>222 H</td>
        <td >1 I</td>
        <td>1 J</td><td>2 J</td><td>3 J</td><td>4 J</td>
        <td>1 K</td><td>2 2 K<br>more..<br>more..</td>
        <td >1 L</td>
        <td>1 M</td><td>22 M</td><td>333 M</td><td>4444 M</td>
        <td>1 N</td><td>2 N</td>
        <td >1 1 1 1 1 1 1 O</td>
    </tr>
    <tr>
        <td>fixed 3</td>
        <td>1 1 1 1 1 A</td><td>2 2 2 2 2 A</td><td>3 3 3 3 3 A</td><td>4 4 4 4 4 A</td>
        <td>1 B</td><td>2 B</td>
        <td >1 C</td>
        <td>1 D</td><td>2 D</td><td>3 D</td><td>4 D<br>more...</td>
        <td>1 E</td><td>2 E</td>
        <td >1 F</td>
        <td>1 1 1 G</td><td>2 2 G</td><td>3 G</td><td>4 4 4 4 G</td>
        <td>1 H</td><td>222 H</td>
        <td >1 I</td>
        <td>1 J</td><td>2 J</td><td>3 J</td><td>4 J</td>
        <td>1 K</td><td>2 2 K<br>more..<br>more..</td>
        <td >1 L</td>
        <td>1 M</td><td>22 M</td><td>333 M</td><td>4444 M</td>
        <td>1 N</td><td>2 N</td>
        <td >1 1 1 1 1 1 1 O</td>
    </tr>
    <tr>
        <td>fixed 4</td>
        <td>1 1 1 1 1 A</td><td>2 2 2 2 2 A</td><td>3 3 3 3 3 A</td><td>4 4 4 4 4 A</td>
        <td>1 B</td><td>2 B</td>
        <td >1 C</td>
        <td>1 D</td><td>2 D</td><td>3 D</td><td>4 D<br>more...<br>more...<br>more...<br>more...</td>
        <td>1 E</td><td>2 E</td>
        <td >1 F</td>
        <td>1 1 1 G</td><td>2 2 G</td><td>3 G</td><td>4 4 4 4 G</td>
        <td>1 H</td><td>222 H</td>
        <td >1 I</td>
        <td>1 J</td><td>2 J</td><td>3 J</td><td>4 J</td>
        <td>1 K</td><td>2 2 K<br>more..<br>more..</td>
        <td >1 L</td>
        <td>1 M</td><td>22 M</td><td>333 M</td><td>4444 M</td>
        <td>1 N</td><td>2 N</td>
        <td >1 1 1 1 1 1 1 O</td>
    </tr>
    <tr>
        <td>fixed 5</td>
        <td>1 1 1 1 1 A</td><td>2 2 2 2 2 A</td><td>3 3 3 3 3 A</td><td>4 4 4 4 4 A</td>
        <td>1 B</td><td>2 B</td>
        <td >1 C</td>
        <td>1 D</td><td>2 D</td><td>3 D</td><td>4 D<br>more...</td>
        <td>1 E</td><td>2 E</td>
        <td >1 F</td>
        <td>1 1 1 G</td><td>2 2 G</td><td>3 G</td><td>4 4 4 4 G</td>
        <td>1 H</td><td>222 H<br>H<br>H<br>H<br>H</td>
        <td >1 I</td>
        <td>1 J</td><td>2 J</td><td>3 J</td><td>4 J</td>
        <td>1 K</td><td>2 2 K<br>more..<br>more..</td>
        <td >1 L</td>
        <td>1 M</td><td>22 M</td><td>333 M</td><td>4444 M</td>
        <td>1 N</td><td>2 N</td>
        <td >1 1 1 1 1 1 1 O</td>
    </tr>
    <tr>
        <td>fixed 6<br>6<br>6<br>6</td>
        <td>1 1 1 1 1 A</td><td>2 2 2 2 2 A</td><td>3 3 3 3 3 A</td><td>4 4 4 4 4 A</td>
        <td>1 B</td><td>2 B</td>
        <td >1 C</td>
        <td>1 D</td><td>2 D</td><td>3 D</td><td>4 D<br>more...</td>
        <td>1 E</td><td>2 E</td>
        <td >1 F</td>
        <td>1 1 1 G</td><td>2 2 G</td><td>3 G</td><td>4 4 4 4 G</td>
        <td>1 H</td><td>222 H</td>
        <td >1 I</td>
        <td>1 J</td><td>2 J</td><td>3 J</td><td>4 J</td>
        <td>1 K</td><td>2 2 K<br>more..<br>more..</td>
        <td >1 L</td>
        <td>1 M</td><td>22 M</td><td>333 M</td><td>4444 M</td>
        <td>1 N</td><td>2 N</td>
        <td >1 1 1 1 1 1 1 O</td>
    </tr>

    </table>


    <!-- static size footer junk--><!-- static size footer junk--><!-- static size footer junk--><!-- static size footer junk-->
    <table border="1" width="100%" cellspacing="1" cellpadding="0" align="center">
    <tr>
    <td width="35%" align="left">footer junk left</td>
    <td >- FOOTER JUNK MIDDLE -</td>
    <td width="35%" align="right">footer junk right</td>
    </tr>

  </form>
</BODY>
</HTML>
javascript
jquery
html
css
html-table
EN

回答 4

Stack Overflow用户

发布于 2012-06-05 00:24:00

我同意@FedericoGiust's answer的观点，但既然你要求更多细节...

代码语言：javascript
复制
<script type="text/javascript"
        src="http://code.jquery.com/jquery-1.7.2.min.js">
</script>
<script type="text/javascript"
        src="http://datatables.net/download/build/jquery.dataTables.min.js">
</script>
<script type="text/javascript"
        src="http://datatables.net/download/build/FixedColumns.min.js">
</script>
<script type="text/javascript">
  $(document).ready(function() {
    var oTable = $('#bigtable').dataTable({
        "sScrollY": "300px",  // set vertical size dynamically here
        "sScrollX": "100%",
        "bPaginate": false,
        "bFilter": false
    });
    new FixedColumns(oTable);
  });​
</script>

您需要添加一行虚拟列标题，以便Datatables能够处理列跨度。

请在jsfiddle上查看。

票数 15
EN

Stack Overflow用户

发布于 2012-06-01 01:59:56

您可以使用DataTables

DataTables

这是一个令人惊叹的jquery表格插件，它还有一些有趣的额外功能和插件，包括固定页眉和页脚，列排序，可变宽度，固定宽度，ajax等等。

票数 11
EN

Stack Overflow用户

发布于 2012-06-05 18:11:33

如果你不想使用插件，可以组合固定标题垂直滚动(CSS)

代码语言：javascript
复制
tbody{display:block;overflow-y:auto;/*+fixed height set w/jQuery etc*/}

具有固定第一列水平滚动(JS)的​

代码语言：javascript
复制
$('#table-container').scroll(function() {
    var _left = $(this).scrollLeft();
    $('#table th').css('left', _left); //"stick" the first column to viewport
});

#table-container{overflow-x:scroll;/*+fixed width set*/}
thead, tbody{display:block;}    
th {position:relative;left:0;/*gets adjusted with JS above*/}

Fiddle'd here，但这并没有解决调整大小以适应浏览器尺寸的问题。假设它将在一个专用的窗口中运行，那么它将是相当琐碎的；如果不是这样，并且它打算在页面中运行，那么保持它的整洁将是相当困难的。

祝好运。

票数 6
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/10838700

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档