Question

我的页面上有标题行，然后页面上显示了一个表格。我希望表格的标题行和顶行被冻结，并使表格的其余部分可以滚动。我的表没有<div id="topheader">元素，我也尝试使用positon：fixed来冻结表头和行的顶行，但只有顶行是固定的。如何冻结标题行？ TIA

代码：

<h1> This is header line </h1> </div> <table ellspacing="0" cellpadding="10" border="1" width="100%" STYLE="empty-cells:show; position:fixed; top:300px;" id="reporttable" > <tr class="header"> <td align="left"> Field1 </td> <td align="left"> Field2 </td> <td align="left"> Field3 </td> </tr> </table> <table cellspacing="0" cellpadding="10" border="1" width="100%" STYLE="empty-cells:show;" id="reporttables"> <tr class="tbody" > <td> Data1 </td> <td> Data2 </td> <td> Data3 </td> </tr> </table> </div>

<style>

    div.topheader{
        position:fixed;
        top:200px;
    }
</style>

CSS：

{{1}}

Answer 1

据我所知，只有一个表元素不能这样做。

解决此问题的一种好方法是创建2个表并使用表上的table-layout: fixed属性，然后在td和th上设置固定宽度。

请检查此Demo或下面的代码段。

＆＃13;

div.div-demo {
  height: 60px;
  overflow-y: scroll;
}

table.demo {
  table-layout: fixed;
  border: 1px solid black;
}

table.demo td, th {
  width: 80px;
  text-align: left;
}

＆＃13;

<table class="demo">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
</table>
<div class="div-demo">
  <table class="demo">
    <tr>
      <td>Content 1</td>
      <td>Content 2</td>
      <td>Content 3</td>
    </tr>
    <tr>
      <td>Content 1</td>
      <td>Content 2</td>
      <td>Content 3</td>
    </tr>
    <tr>
      <td>Content 1</td>
      <td>Content 2</td>
      <td>Content 3</td>
    </tr>
    <tr>
      <td>Content 1</td>
      <td>Content 2</td>
      <td>Content 3</td>
    </tr>
  </table>
</div>

＆＃13;

为HTML表冻结几行和顶行

1 个答案: