Question

我想要一个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/

Answer 1

你可以找到一个jQuery插件here来为你做这件事;）

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

希望这有帮助

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

2 个答案: