Fatal编程技术网
  • javascript/
  • Javascript 我怎样才能租一张桌子'；它的身体滚动，但保持头部固定在适当的位置？

Javascript 我怎样才能租一张桌子'；它的身体滚动，但保持头部固定在适当的位置？

javascript html css

Javascript 我怎样才能租一张桌子'；它的身体滚动，但保持头部固定在适当的位置？,javascript,html,css,html-table,Javascript,Html,Css,Html Table,我正在写一个页面，我需要一个HTML表来保持一个设定的大小。我需要表格顶部的标题始终保持在那里，但我也需要表格主体滚动，无论有多少行添加到表格中。想一想excel的迷你版。这似乎是一项简单的任务，但我在网上找到的几乎所有解决方案都有一些缺点。如何解决此问题？您是否尝试过使用ad和tbody，并使用overflow:scroll在tbody上设置固定高度 你的目标浏览器是什么 编辑：它在firefox中运行得很好（几乎），垂直滚动条的添加也导致了对水平滚动条的需求——真恶心。IE只是将每个td的高

我正在写一个页面，我需要一个HTML表来保持一个设定的大小。我需要表格顶部的标题始终保持在那里，但我也需要表格主体滚动，无论有多少行添加到表格中。想一想excel的迷你版。这似乎是一项简单的任务，但我在网上找到的几乎所有解决方案都有一些缺点。如何解决此问题？

您是否尝试过使用ad和tbody，并使用overflow:scroll在tbody上设置固定高度

你的目标浏览器是什么

编辑：它在firefox中运行得很好（几乎），垂直滚动条的添加也导致了对水平滚动条的需求——真恶心。IE只是将每个td的高度设置为我指定的车身高度。以下是我能想到的最好的：

<html>
    <head>
    <title>Blah</title>
    <style type="text/css">
    table { width:300px; }
    tbody { height:10em;  overflow:scroll;}
    td { height:auto; }
    </style>
    </head>
    <body>
    <table>
        <thead>
            <tr>
              <th>One</th><th>Two</th>
              </td>
            </tr>
        </thead>
        <tbody>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
        </tbody>
    </table>
    </body>
</html>


废话
表{宽度：300px；}
t正文{高度：10em；溢出：滚动；}
td{height:auto；}
一二
数据数据
数据数据
数据数据
数据数据
数据数据
数据数据
数据数据
数据数据
数据数据
数据数据
数据数据
数据数据
数据数据
数据数据
数据数据
为我们的应用程序实现这样一个网格，这让我非常头疼。我尝试了各种各样的技术，但都有问题。最接近我的是使用jQuery插件，比如（寻找替代品），但它似乎不支持我所需要的100%宽的表

我最终做的是自己滚；Firefox支持滚动
tbody
元素，所以我浏览器嗅探并使用了适当的CSS（设置高度、溢出等…询问是否需要更多细节）来进行滚动，然后对于其他浏览器，我使用了两个单独的表，设置为使用
表布局：fixed
，它使用了一种大小调整算法，保证不会溢出指定的大小（当内容太宽而无法容纳时，普通表将扩展）。通过给两个表相同的宽度，我可以让它们的列对齐。我把第二个包裹在一个卷轴的div集合中，并用一点带边距的小把戏等来获得我想要的外观和感觉

抱歉，如果这个答案在某些地方听起来有点模糊；我写得很快，因为我没有太多时间。如果你想让我进一步扩展，请留下评论

我必须找到同样的答案。我发现最好的例子是——我发现例子2对我来说很有效。您必须使用Java脚本设置内部表格的高度，其余的是CSS。

不确定是否有人还在看这个，但我之前的做法是使用两个表格来显示单个原始表格-第一个表格仅显示原始表格标题行，没有表格正文行（或一个空的正文行以使其生效）

第二个位于单独的div中，没有标题，只有原始的表体行。然后使单独的div可滚动

它的div中的第二个表位于HTML中第一个表的正下方，看起来像是一个带有固定标题和可滚动下半部分的表。我只在Safari、Firefox和IE（2010年春季的最新版本）中测试过这一点，但它在所有这些版本中都有效

它唯一的问题是第一个表在没有正文的情况下无法验证（W3.org validator-XHTML 1.0 strict），当我添加了一个没有内容的表时，它会导致一个空行。您可以使用CSS使其不可见，但它仍然会占用页面上的空间。

以下是一段真正适用于IE和FF的代码（至少）：


试验
桌子{
宽度：400px；
}
t车身{
高度：100px；
溢出：滚动；
}
div{
高度：100px；
宽度：400px；
位置：相对位置；
}
tr.alt td{
背景色：#EEEEEE；
}
用户
电子邮件
身份证件
是/否
用户1
user@user.com
1.
Y
用户2
user@user.com
2.
N
用户3
user@user.com
3.
Y
用户4
user@user.com
4.
N
用户5
user@user.com
5.
Y
用户6
user@user.com
6.
N
用户7
user@user.com
7.
Y
用户8
user@user.com
8.
N
我已经修改了原始代码，使其更清晰，并使其在IE和FF中工作良好

原始代码

这是我的选择。它还对页眉、正文和页脚使用不同的div，但在调整窗口大小以及搜索、滚动、排序、过滤和定位时同步：

点击爵士乐，古典音乐。。。查看表格的按钮。它的设置使得即使JavaScript是 
<html>
<head>
    <title>Test</title>
    <style type="text/css">
        table{
            width: 400px;
        }
        tbody {
            height: 100px;
            overflow: scroll;
        }
        div {
            height: 100px;
            width: 400px;
            position: relative;
        }
        tr.alt td {
            background-color: #EEEEEE;
        }
    </style>
    <!--[if IE]>
        <style type="text/css">
            div {
                overflow-y: scroll;
                overflow-x: hidden;
            }
            thead tr {
                position: absolute;
                top: expression(this.offsetParent.scrollTop);
            }
            tbody {
                height: auto;
            }
        </style>
    <![endif]--> 
</head>
<body>
    <div >
        <table border="0" cellspacing="0" cellpadding="0">
            <thead>
                <tr>
                    <th style="background: lightgreen;">user</th>
                    <th style="background: lightgreen;">email</th>
                    <th style="background: lightgreen;">id</th>
                    <th style="background: lightgreen;">Y/N</th>
                </tr>
            </thead>
            <tbody align="center">
                <!--[if IE]>
                    <tr>
                        <td colspan="4">on IE it's overridden by the header</td>
                    </tr>
                <![endif]--> 
                <tr>
                    <td>user 1</td>
                    <td>user@user.com</td>
                    <td>1</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 2</td>
                    <td>user@user.com</td>
                    <td>2</td>
                    <td>N</td>
                </tr>
                <tr>
                    <td>user 3</td>
                    <td>user@user.com</td>
                    <td>3</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 4</td>
                    <td>user@user.com</td>
                    <td>4</td>
                    <td>N</td>
                </tr>
                <tr>
                    <td>user 5</td>
                    <td>user@user.com</td>
                    <td>5</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 6</td>
                    <td>user@user.com</td>
                    <td>6</td>
                    <td>N</td>
                </tr>
                <tr>
                    <td>user 7</td>
                    <td>user@user.com</td>
                    <td>7</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 8</td>
                    <td>user@user.com</td>
                    <td>8</td>
                    <td>N</td>
                </tr>
            </tbody>
        </table>
    </div>
</body></html>

//Usage add Scrollify class to a table where all columns (header and body) have a fixed pixel width
$(document).ready(function () {
    $("table.Scrollify").each(function (index, element) {
        var header = $(element).children().children().first();
        var headerHtml = header.html();
        var width = $(element).outerWidth();
        var height = parseInt($(element).css("height")) - header.outerHeight();
        $(element).height("auto");
        header.remove();
        var html = "<table style=\"border-collapse: collapse;\" border=\"1\" rules=\"all\" cellspacing=\"0\"><tr>" + headerHtml +
                         "</tr></table><div style=\"overflow: auto;border:0;margin:0;padding:0;height:" + height + "px;width:" + (parseInt(width) + scrollbarWidth()) + "px;\">" +
                         $(element).parent().html() + "</div>";

        $(element).parent().html(html);
    });
});


//Function source: http://www.fleegix.org/articles/2006-05-30-getting-the-scrollbar-width-in-pixels
//License: Apache License, version 2
function scrollbarWidth() {
    var scr = null;
    var inn = null;
    var wNoScroll = 0;
    var wScroll = 0;

    // Outer scrolling div
    scr = document.createElement('div');
    scr.style.position = 'absolute';
    scr.style.top = '-1000px';
    scr.style.left = '-1000px';
    scr.style.width = '100px';
    scr.style.height = '50px';
    // Start with no scrollbar
    scr.style.overflow = 'hidden';

    // Inner content div
    inn = document.createElement('div');
    inn.style.width = '100%';
    inn.style.height = '200px';

    // Put the inner div in the scrolling div
    scr.appendChild(inn);
    // Append the scrolling div to the doc
    document.body.appendChild(scr);

    // Width of the inner div sans scrollbar
    wNoScroll = inn.offsetWidth;
    // Add the scrollbar
    scr.style.overflow = 'auto';
    // Width of the inner div width scrollbar
    wScroll = inn.offsetWidth;

    // Remove the scrolling div from the doc
    document.body.removeChild(
        document.body.lastChild);

    // Pixel width of the scroller
    return (wNoScroll - wScroll);
}

<style type="text/css">
table {
  border-spacing: 0;              /* workaround */
}
tbody {
  height: 4em;                    /* define the height */
  overflow-x: hidden;             /* esthetics */
  overflow-y: auto;               /* allow scrolling cells */
}
td {
  border-left:   1px solid blue;  /* workaround */
  border-bottom: 1px solid blue;  /* workaround */
}
</style>

<table>
    <thead><tr><th>Header
    <tfoot><tr><th>Footer
    <tbody>
        <tr><td>Cell 1    <tr><td>Cell 2
        <tr><td>Cell 3    <tr><td>Cell 4
        <tr><td>Cell 5    <tr><td>Cell 6
        <tr><td>Cell 7    <tr><td>Cell 8
        <tr><td>Cell 9    <tr><td>Cell 10
        <tr><td>Cell 11   <tr><td>Cell 12
        <tr><td>Cell 13   <tr><td>Cell 14
    </tbody>
</table>

// get table width and match the mask width

function setMaskWidth() { 
  if (document.getElementById('mask') !==null) {
    var tableWidth = document.getElementById('theTable').offsetWidth;

    // match elements to the table width
    document.getElementById('mask').style.width = tableWidth + "px";
   }
}

function fixTop() {

  // get height of page content 
  function getScrollY() {
      var y = 0;
      if( typeof ( window.pageYOffset ) == 'number' ) {
        y = window.pageYOffset;
      } else if ( document.body && ( document.body.scrollTop) ) {
        y = document.body.scrollTop;
      } else if ( document.documentElement && ( document.documentElement.scrollTop) ) {
        y = document.documentElement.scrollTop;
      }
      return [y];
  }  

  var y = getScrollY();
  var y = y[0];

  if (document.getElementById('mask') !==null) {
      document.getElementById('mask').style.height = y + "px" ;

      if (document.all && document.querySelector && !document.addEventListener) {
        document.styleSheets[1].rules[0].style.top = y + "px" ;
      } else {
        document.styleSheets[1].cssRules[0].style.top = y + "px" ;
      }
  }

}

window.onscroll = function() {
  setMaskWidth();
  fixTop();
}

tbody {
   overflow-y: auto;
   display: block;
   max-height: 10em;    // For example
}

thead {         
   display: table;  
   width: 100%;     // Fill the containing table
}
tbody tr {
   display: table;
   width: 100%;     // Fill the containing table
}

thead {
   table-layout: fixed;   // Same layout for all cells
}
tbody tr {
   table-layout: fixed;   // Same layout for all cells
}
th, td {
   width: auto;   // Same width for all cells, if table has fixed layout
}    

    table {
        overflow: scroll;
        display: block;    /*inline-block*/
        height: 120px;
    }
    thead > tr  {
        position: absolute;
        display: block;
        padding: 0;
        margin: 0;
        top: 0;
        background-color: gray;
    }
    tbody > tr:nth-of-type(1) {
        margin-top: 16px;
    }
    tbody tr {
        display: block;
    }

    td, th {
        width: 70px;
        border-style:solid;
        border-width:1px;
        border-color:black;
    }

.table-fill {
    background: white;
    border-radius:3px;
    border-collapse: collapse;
    margin: auto;
    width: 100%;
    max-width: 800px;
    padding:5px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    animation: float 5s infinite;
}