带有表头的不可滚动的 HTML 内容答案

【问题标题】：Non Scrollable HTML content with table headers带有表头的不可滚动的 HTML 内容
【发布时间】：2014-05-15 01:53:07
【问题描述】：

我想要一个具有 html 标头和表格标头的 html 页面具有不可滚动的功能。只有表格内容应该是可滚动的。

例如：

<html>
    <body>
        <h1>header</h1>
        <h1>header2</h1>
        <table>
            <thead>
                <tr>
                    <th>name</th>
                </tr>
                <tr>
                    <th>address</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>Venkat</td>
                </tr>
                <tr>
                    <td>bangalore</td>
                </tr>
                //this part will be repeating
            </tbody>
        </table>
    </body>
</html>

我只希望表格正文中的内容可以滚动。

我也参考了以下链接How do you create non scrolling div at the top of an HTML page without two sets of scroll bars

但我不能使用 div 只包含标题和表头..

我创建了一个与我类似的情况的小提琴。请看http://jsfiddle.net/VenkateshManohar/bU7NN/

【问题讨论】：

How to make Scrollable Table with fixed headers using CSS!的可能重复

标签： html css

【解决方案1】：

你会找到一个 jQuery 插件 here 来为你做这件事；）

【讨论】：

试过这个插件。即使那对我也不起作用..我没有收到任何错误..但是桌子原样。

【解决方案2】：

你可以这样尝试：LINK

HTML 代码：

<div class="dataGridHeader">
  <div class="dataGridContent">
    <table cellpadding="0" cellspacing="0" class="scrolltablestyle style-even">
      <thead>
        <tr>
          <th width="160">Shopper Name</th>
          <th width="160">First Name</th>
          <th width="160">Last Name</th>
          <th width="160">User ID</th>
          <th width="160">Status</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td width="160">C2C Fishing</td>
          <td width="160">John</td>
          <td width="160">Doe</td>
          <td width="160">C2C Fishing</td>
          <td width="160">Enabled</td>
        </tr>

.
.
.
.
      </tbody>
    </table>
  </div>
</div>

希望对你有帮助

【讨论】：

试过这个...功能工作正常。但在我的表中，我有隐藏的列，可以使用多选引导程序动态显示。因此表头列和行的宽度不匹配...您对此有什么建议吗？
即使使用这个小提琴解决方案在我的情况下也不起作用。因为有一些列被多选隐藏并且可以动态显示。除了当我使用这个解决方案时，标题和列的宽度不会相同。感谢您的时间和建议..
我已经创建了一个相同的小提琴请看jsfiddle.net/VenkateshManohar/bU7NN