Question

我有这个转发器，我想显示滚动和固定的页眉和页脚

下面是我在转发器中显示的代码

<table>
<thead>
  <tr>
    <td>Sr No.</td>
    <td>Firstname</td>
    <td>Middlename</td>
    <td>Lastname</td>
    <td>Salary</td>
    <td>Join Date</td>
    <td>Gender</td>
    <td>DOB</td>
    <td>Designation</td>
    <td>Department</td>
    <td>HR Manager</td>
    <td>Reporting Manager</td>
  </tr>
</thead>
 
<tbody>
  <asp:Repeater ID="repEmpList" runat="server">
    <ItemTemplate>
    <tr>
      <td><%#Container.ItemIndex+1 %></td>
    <td>Firstname</td>
    <td>Middlename</td>
    <td>Lastname</td>
    <td>Join Date</td>
    <td>Gender</td>
    <td>DOB</td>
    <td>Designation</td>
    <td>Department</td>
    <td>HR Manager</td>
    <td>Reporting Manager</td>
    </tr>
    </ItemTemplate>
  </asp:Repeater>
  </tbody>
  <tfoot>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>0.00</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</tfoot>
</table>

现在我想要两个水平和垂直的卷轴与固定的页眉和页脚

我该怎么做？

请帮帮我

提前谢谢

Answer 1

＆＃13;

thead, tbody { display: block; width:500px; padding: 0px; }
td {width:150px;}
th {width:150px;}

#thbold {
	text-align: center;
    color: red;
	}
td { padding : 0px;}
th { padding : 0px;}
tr { padding : 0px;}
table, td, th {
    border: 2px solid black;
  margin : 0px;
  padding : 0px;
 
}	
tbody {
    height: 100px;       /* Just for the demo          */
    overflow-y: scroll;    /* Trigger vertical scroll    */
    overflow-x: scroll;  /* Hide the horizontal scroll */
	
	
}

＆＃13;

<html>

<body>
<table style="width:300px;">


<tbody>
<tr id="thbold">
    <th>Head 1</th>
    <th>Head 2</th>
    <th>Head 3</th>
    <th>Head 4</th>
    <th>Head 5</th>

</tr>
<tr>
    <td>Content 1</td>
    <td>Content 2</td>
    <td>Content 3</td>
    <td>Content 4</td>
    <td>Content 5</td>

</tr>
<tr>
    <td>Content 1</td>
    <td>Content 2</td>
    <td>Content 3</td>
    <td>Content 4</td>
    <td>Content 5</td>

</tr><tr>
    <td>Content 1</td>
    <td>Content 2</td>
    <td>Content 3</td>
    <td>Content 4</td>
    <td>Content 5</td>

</tr><tr>
    <td>Content 1</td>
    <td>Content 2</td>
    <td>Content 3</td>
    <td>Content 4</td>
    <td>Content 5</td>
</tr>
</tbody>
</table>

</body>

</html>

＆＃13;

这是一个非常快速完成的代码，虽然这似乎满足您的需求。您可以根据自己的需要随意修改和设计样式。记得将thead和tbody设置为要阻止的显示类型，并限制块的高度和宽度，设置overflow-x，overflow-y进行滚动。请随时要求进一步澄清

使用转发器控件

1 个答案: