如何让桌子的身体滚动但是将头部固定到位？

时间：2008-09-24 23:21:48

标签： javascript html css html-table

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

18 个答案:

答案 0 :(得分：53)

我必须找到相同的答案。我发现的最好的例子是http://www.cssplay.co.uk/menu/tablescroll.html - 我发现示例＃2对我来说效果很好。您必须使用Java Script设置内部表的高度，其余的是CSS。

答案 1 :(得分：34)

我发现DataTables非常灵活。虽然其默认版本基于jquery，但还有AngularJs plugin。

答案 2 :(得分：12)

我看到了Sean Haddy的excellent solution to a similar question并取得了making some edits的自由：

  • 使用类而不是ID，因此可以重用一个jQuery脚本 一页上有多个表格
  • 添加了对caption，thead，tfoot和tbody
    • 等语义HTML表格元素的支持
  • 使滚动条可选，因此对于比可滚动高度
    • “更短”的表格不会显示
  • 调整滚动div的宽度，使滚动条向上移动到表格的右边缘
  • 制作概念
    • 在注入的静态表头
      • 上使用aria-hidden =“true”
    • 并保留原始thead，只需使用jQuery隐藏并设置aria-hidden="false"
  • 显示了不同大小的多个表的示例
然而，肖恩完成了繁重的工作。感谢Matt Burland，也指出需要支持tfoot。

请亲自查看http://jsfiddle.net/jhfrench/eNP2N/

答案 3 :(得分：8)

您是否尝试过使用thead和tbody，并在tbody上设置固定高度溢出：滚动？

您的目标浏览器是什么？

编辑：它在firefox中运行良好（几乎） - 添加垂直滚动条导致需要一个水平滚动条 - yuck。 IE只是将每个td的高度设置为我指定的tbody高度。这是我能想到的最好的：

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

答案 4 :(得分：7)

您需要的是：

1）具有高度有限的表体，因为只有当内容大于滚动窗口时才会发生滚动。但是tbody无法调整大小，您必须将其显示为block才能执行此操作：

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

2）重新同步表头和表体列宽，因为后者为block使其成为无关元素。唯一的方法是通过对两个强制执行相同的列宽来模拟同步。

但是，由于tbody本身现在是block，因此它不再像table那样行事。由于您仍需要table行为才能正确显示列，因此解决方案是要求将每个行显示为单独的table s：

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

（请注意，使用此技术，您再也无法跨行了。）

完成后，您可以强制列宽在thead和tbody中具有相同的宽度。你不能那样：

  • 单独为每一列（通过特定的CSS类或内联样式），这对每个表实例都非常繁琐;
  • 对所有列统一（如果您有5列，则通过th, td { width: 20%; }），这更实用（不需要为每个表实例设置宽度）但不能用于任何列计数
  • 通过固定的表格布局统一计算任何列数。

我更喜欢最后一个选项，需要添加：

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
}

查看演示here，从this question的答案中分叉。

答案 5 :(得分：4)

编辑：这是一个非常古老的答案，只是为了表明它在2000年代曾遭到支持，但是由于2010年的浏览器策略是尊重W3C规范，即使删除了一些功能：在HTML5之前笨拙地指定了具有固定页眉/页脚的可滚动表。

坏消息

不幸的是，没有优雅的方法来处理具有固定thead / tfoot的可滚动表格 因为HTML/CSS specifications are not very clear about that feature。

说明

虽然HTML 4.01 Specification说thead / tfoot / tbody使用（引入？）来滚动表正文：

  

表行可以使用THEAD，TFOOT和TBODY元素进行分组[...]。   这种划分使用户代理能够支持独立于桌面和脚的滚动表体。

但FF 3.7中的工作可滚动表功能已在FF 3.7中删除，因为因为不符合HTML / CSS规范而被视为错误。请参阅有关FF错误的this和that条评论。

Mozilla开发者网络提示

以下是 MDN对可滚动表的有用提示的简化版本 see this archived page或current French version 

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

然而，MDN也说this does not work any more on FF :-（
我还测试了IE8 =＆gt; table也不可滚动： - （（

答案 6 :(得分：3)

不确定是否有人仍然在看这个但是我以前做过的方式是使用两个表来显示单个原始表 - 第一个只是原始表标题行而没有表体行（或者是空体）行验证）。

第二个是在一个单独的div中，没有标题，只有原始的表体行。然后单独的div可以滚动。

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

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

答案 7 :(得分：3)

此解决方案适用于Chrome 35，Firefox 30和IE 11（未经测试的其他版本）

纯CSS： http://jsfiddle.net/ffabreti/d4sope1u/

一切都设置为显示：块，表需要高度：

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

答案 8 :(得分：2)

这给我带来了巨大的麻烦，试图为我们的应用程序实现这样的网格。我尝试了所有各种技术，但每个都有问题。我最接近的是使用jQuery插件，例如Flexigrid（在http://www.ajaxrain.com上查找备选方案），但这似乎不支持100％宽的表，这是我需要的。

我最终做的就是自己动手; Firefox支持滚动tbody元素，因此我浏览器嗅探并使用适当的CSS（设置高度，溢出等...询问您是否需要更多详细信息）来进行滚动，然后对于其他浏览器我使用两个单独的表设置为使用table-layout: fixed，它使用一个保证不会溢出规定大小的大小调整算法（当内容太宽而不适合时，普通表会扩展）。通过给两个表格相同的宽度，我能够让它们的列排成一行。我将第二个包裹在一个div组中以进行滚动，并使用一些带有边缘的jiggery pokery等设法获得我想要的外观和感觉。

很抱歉，如果这个答案在某些地方听起来有点模糊;我写得很快，因为我没有太多时间。如果您希望我进一步扩展，请发表评论！

答案 9 :(得分：2)

这是一个真正适用于IE和FF的代码（至少）：

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

我已经更改了原始代码以使其更清晰，并且还使其在IE和FF中正常工作..

原始代码HERE

答案 10 :(得分：1)

抱歉，我没有阅读你问题的所有回复。

是的，你想要的东西（我已经做过）

您可以使用两个表，具有相同类型的相似样式，一个只有表头，另一个有行。 现在把这个表放在一个具有固定高度的div中，溢出-y：自动或滚动。

答案 11 :(得分：1)

直播JsFiddle

只有HTML＆amp; CSS 

table.scrollTable {
  border: 1px solid #963;
  width: 718px;
}

thead.fixedHeader {
  display: block;
}

thead.fixedHeader tr {
  height: 30px;
  background: #c96;
}

thead.fixedHeader tr th {
  border-right: 1px solid black;
}

tbody.scrollContent {
  display: block;
  height: 262px;
  overflow: auto;
}

tbody.scrollContent td {
  background: #eee;
  border-right: 1px solid black;
  height: 25px;
}

tbody.scrollContent tr.alternateRow td {
  background: #fff;
}

thead.fixedHeader th {
  width: 233px;
}

thead.fixedHeader th:last-child {
  width: 251px;
}

tbody.scrollContent td {
  width: 233px;
}
<table cellspacing="0" cellpadding="0" class="scrollTable">
  <thead class="fixedHeader">
    <tr class="alternateRow">
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody class="scrollContent">
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>End of Cell Content 1</td>
      <td>End of Cell Content 2</td>
      <td>End of Cell Content 3</td>
    </tr>
  </tbody>
</table>

答案 12 :(得分：1)

我对上述建议的主要问题是能够插入tablesorter.js并且能够为限制为特定最大大小的表浮动标头。我最终偶然发现了插件jQuery.floatThead，它提供了浮动标题并允许排序继续工作。

它还有一个很好的比较页面显示自己与similar plugins。

答案 13 :(得分：1)

这是我的另类选择。它还使用不同的DIV作为页眉，正文和页脚，但同步用于窗口大小调整以及搜索，滚动，排序，过滤和定位：

My CD lists

点击Jazz，Classical ...按钮查看表格。它的设置使得即使关闭JavaScript也足够了。

IE，FF和WebKit（Chrome，Safari）似乎没问题。

答案 14 :(得分：0)

我使用javascript（无库）和CSS执行此操作 - 表格主体滚动页面，并且表格不必是固定的宽度或高度，尽管每列必须有宽度。 您还可以保持排序功能。

基本上：

  1. 在HTML中，创建容器div以定位表头行和 表体，也创建一个“掩码”div来隐藏表体 滚动标题

  2. 在CSS中，将表格部分转换为块

  3. 在Javascript中，获取表格宽度并匹配蒙版的宽度... get 页面内容的高度...测量滚动位置... 操纵CSS来设置表头行位置和掩码 高度

    4. 这是javascript和 jsFiddle DEMO. 

    // 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();
}

答案 15 :(得分：0)

如果可以在这里使用JavaScript是我的解决方案 在所有列上创建一个固定宽度的表集（像素！）将类Scrollify添加到表中，并以css或style添加此javascript + jquery 1.4.x set height！

测试：Opera，Chrome，Safari，FF，IE5.5（ Epic脚本失败），IE6，IE7，IE8，IE9 

//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);
}

编辑：固定高度。

答案 16 :(得分：0)

对我来说，在从表CSS中删除宽度之前，与滚动无关的任何内容都有效。最初，表CSS看起来像这样：

.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;
}

我一删除宽度：100％;所有滚动功能都开始工作。

答案 17 :(得分：0)

如果标准足够低；），可以将仅包含标题的表放在仅包含主体的表的正上方。它不会水平滚动，但是如果您不需要...

相关问题
最新问题