table表头固定(一个table）

最新推荐文章于 2023-09-27 18:39:30 发布
最新推荐文章于 2023-09-27 18:39:30 发布
阅读量319 收藏
点赞数

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="Generator" content="EditPlus®">
 <meta name="Author" content="">
 <meta name="Keywords" content="">
 <meta name="Description" content="">
 <title>Document</title>
 <style>
 div{
 overflow: auto;
 width: 100%;
 }
 table{
 margin:0 auto;
 border-collapse: collapse;
 border: none;
 }
 thead{
 display: block;
 width: 100%;
 }
 tbody{
 display: block;
 height:200px;
 width: 100%;
 overflow-x:auto;
 }
 thead tr th{
 white-space: nowrap;
 border:1px solid #dbeaf9;
 width: 100px;
 }
 td{
 white-space: nowrap;
 width:103px;
 border:1px solid #dbeaf9;
 border-top:0px;
 }
 </style>
 </head>
 <body>
  <div>
   <table>
    <thead>
     <tr>
      <th>表头1</th>
      <th>表头2</th>
      <th>表头3</th>
      <th>表头4</th>
      <th>表头5</th>
      <th style="width:117px;">表头6</th>
     </tr>
    </thead>
    <tbody>
     <tr>
      <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td><td>内容</td><td>内容</td>
     </tr>
      <tr>
      <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td><td>内容</td><td>内容</td>
     </tr>
     <tr>
      <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td><td>内容</td><td>内容</td>
     </tr>
      <tr>
      <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td><td>内容</td><td>内容</td>
     </tr>
     <tr>
      <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td><td>内容</td><td>内容</td>
     </tr>
      <tr>
      <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td><td>内容</td><td>内容</td>
     </tr>
     <tr>
      <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td><td>内容</td><td>内容</td>
     </tr>
      <tr>
      <td>内容2</td> <td>内容2</td> <td>内容2</td> <td>内容2</td><td>内容2</td><td>内容2</td>
     </tr>
      <tr>
      <td>内容2</td> <td>内容2</td> <td>内容2</td> <td>内容2</td><td>内容2</td><td>内容2</td>
     </tr>
     <tr>
      <td>内容2</td> <td>内容2</td> <td>内容2</td> <td>内容2</td><td>内容2</td><td>内容2</td>
     </tr>
      <tr>
      <td>内容2</td> <td>内容2</td> <td>内容2</td> <td>内容2</td><td>内容2</td><td>内容2</td>
     </tr>
     <tr>
      <td>内容2</td> <td>内容2</td> <td>内容2</td> <td>内容2</td><td>内容2</td><td>内容2</td>
     </tr>
      <tr>
      <td>内容2</td> <td>内容2</td> <td>内容2</td> <td>内容2</td><td>内容2</td><td>内容2</td>
     </tr>
     <tr>
      <td>内容2</td> <td>内容2</td> <td>内容2</td> <td>内容2</td><td>内容2</td><td>内容2</td>
     </tr>
      <tr>
      <td>内容2</td> <td>内容2</td> <td>内容2</td> <td>内容2</td><td>内容2</td><td>内容2</td>
     </tr>
    </tbody>
   </table>
  </div>
 </body>
</html>
Syuqian
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
table表头固定
06-28
可惜所有代码都是用javascript写的，数据添加也是用javascript动态添加的。 我想把它应用在ASP.NET的程序中，通过一个repeater控件将数据库中的数据动态取出来，显示出如上效果。
html Table 表头固定的实现
09-22
主要介绍了html Table 表头固定的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
table 表头固定
github_38186390的博客
09-27 1975
一。table 表头固定说明。我们将表头和表内容分成两个表格就可以解决该问题。 二。代码。 css代码：里面定死的宽高只是为啦方便看效果，实际中需要使用js计算出来。 * { box-sizing: border-box; } .table { border: 1px solid #efefef; ...
table固定表头
bluelotos893的博客
09-01 7534
设置table表头固定
移动端table固定表头与固定第一列
02-20
这里的`#fixed-header`是表头的ID，`headerHeight`是表头的高度，当滚动超过这个高度时，给表头添加一个`fixed`的类，这个类可以预定义固定的样式。 此外，还需要注意兼容性问题。虽然HTML5和CSS3提供了很多新特性...
table表头及列固定
10-17
一个`table`由`<table>`标签开启，`</table>`标签关闭。其中，`<thead>`定义表头，`<tbody>`包含表格的主要内容，`<tr>`代表表格行，`<th>`表示表头单元格，而`<td>`则表示普通数据单元格。例如： ```html <table> ...
bootstrap-table实现表头固定以及列固定的方法示例
10-17
主要介绍了bootstrap-table实现表头固定以及列固定的方法示例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
一个table表头固定，内容可滚动的实用例子
10-20
一个table表头固定，内容可滚动的实用例子,同时可以实现增加，删除功能
js table 固定表头
02-16
js table 固定表头
html table 固定表头和列
09-21
html table 固定表头和列，下载后，运行index.html页面即可看到效果。
实现Table表头和列固定
08-01
实现表头和列固定，并可行多表头，多列(左右都可以)，无错位
固定table的thead表头
11-11
固定table的thead表头
Table固定表头
Free Labor 的专栏
03-25 371
Table固定表头 使用CSS position:sticky <!DOCTYPE html> <html> <head> <style> table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 28px; } tr:nth-child(even) {background-color: #f2f2f2;} tr:hov.
table表格固定表头
weixin_54366356的博客
06-04 5975
table表格内容过多时会出现滚动，若不固定表头的话，当滚动到下方时即看不见每一列所对应的标题，影响用户体验！ 废话不多说，直接上代码！！！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-
HTML table表头固定
最新发布
普罗旺斯
09-27 1326
【代码】HTML table表头固定。
table固定表头、固定列
RRRRRDong的博客
07-17 8386
最近在做一些报表，使用原生table画的，记录一下固定表头的一些方法。 使用position:sticky来固定表头 html: <div id="common-table"> <table id="table-container" cellpadding="0" cellspacing="0" border="0"> <thead> <tr> <th>1</th>
elementui table 表头固定
07-21
Element UI 的 Table 组件默认情况下是不支持表头固定的，但你可以通过一些 CSS 和 JavaScript 的方式来实现表头固定的效果。 以下是一种实现表头固定的方法： 1. 使用 CSS 设置表头的固定样式。可以通过设置表头的 `position` 为 `sticky`，并指定 `top` 属性来实现固定在顶部。同时，设置表头的 `background-color`、`z-index` 等样式以适应你的需求。例如： ```css .el-table__header-wrapper { position: sticky; top: 0; background-color: #f5f7fa; z-index: 1; } ``` 2. 使用 JavaScript 监听表格的滚动事件，并在滚动时调整表格内容的位置。可以通过获取表格内容区域的滚动位置，然后将表头的偏移量设置为负值，使其保持在固定位置。例如： ```javascript mounted() { const headerWrapper = document.querySelector('.el-table__header-wrapper'); const contentWrapper = document.querySelector('.el-table__body-wrapper'); contentWrapper.addEventListener('scroll', () => { headerWrapper.style.transform = `translateY(-${contentWrapper.scrollTop}px)`; }); } ``` 这样，当表格内容区域发生滚动时，表头就会保持在固定位置。 请注意，这只是一种简单的实现方式，具体的实现方法可能因你的需求和界面样式而有所不同。你可以根据实际情况进行调整和优化。 希望对你有所帮助！如果还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值