固定Table第一行或某几行不随滚动条滚动而滚动

yizhihongxing

首先我们可以使用CSS中的position属性来实现表格的固定。具体流程如下:

  1. 首先,我们可以将表格的头部固定在画面的顶部,使其不随着滚动条滚动而滚动。将表格分为表头和表体两部分,然后给表头添加CSS样式:
thead {
    position: fixed;
    top: 0;
}

这里给表头设置了position: fixed属性,然后将top属性设置为0,就将表头固定在了画面的顶部。

  1. 接着,我们需要为表格的主体部分添加一些样式,将其顶部与表头位置对齐,避免表头与表格主体发生重叠。同时,还需要为表格主体添加margin-top属性,将它们与固定在顶部的表头合理地分隔开来。
tbody {
    display: block;
    margin-top: 50px; /* 这个高度需要根据实际情况进行调整 */
}

tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

td {
    padding: 5px;
    text-align: center;
    border: 1px solid black;
}

这里给tbody设置了display: block属性,将其改为块级元素,然后指定一个margin-top值。将tbody中的每行tr改为一个表格,然后为表格中的每个单元格td添加一些样式。

  1. 最后,我们需要为表格主体的第一行添加一些样式,使其与表头风格一致。
tbody tr:first-child {
    background-color: #ccc;
}

这里为表格主体中的第一行添加了一个背景色。

通过以上三条CSS规则,我们就可以实现固定表格第一行不随滚动条滚动而滚动。

示例1:表格固定第一行

<table>
  <thead>
    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>101</td>
      <td>张三</td>
      <td>20</td>
    </tr>
    <tr>
      <td>102</td>
      <td>李四</td>
      <td>22</td>
    </tr>
    <tr>
      <td>103</td>
      <td>王五</td>
      <td>23</td>
    </tr>
  </tbody>
</table>

<style>
  thead {
    position: fixed;
    top: 0;
  }

  tbody {
    display: block;
    margin-top: 30px;
  }

  tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
  }

  tbody tr:first-child {
      background-color: #ccc;
  }

  td {
    padding: 5px;
    text-align: center;
    border: 1px solid black;
  }
</style>

示例2:表格固定前两行

<table>
  <thead>
    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>101</td>
      <td>张三</td>
      <td>20</td>
    </tr>
    <tr>
      <td>102</td>
      <td>李四</td>
      <td>22</td>
    </tr>
    <tr>
      <td>103</td>
      <td>王五</td>
      <td>23</td>
    </tr>
  </tbody>
</table>

<style>
  thead {
    position: fixed;
    top: 0;
  }

  tbody {
    display: block;
    margin-top: 60px;
  }

  tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
  }

  tbody tr:nth-child(-n+2) {
      background-color: #ccc;
  }

  td {
    padding: 5px;
    text-align: center;
    border: 1px solid black;
  }
</style>

以上就是固定表格某行不随滚动条滚动而滚动的完整攻略。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:固定Table第一行或某几行不随滚动条滚动而滚动 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • 如何利用vw+rem进行移动端布局

    利用vw+rem进行移动端布局,可以实现网页在不同设备上的自适应布局,使得页面在任何尺寸的屏幕上都能够完美展示。下面是利用vw+rem进行移动端布局的详细攻略: 1. 使用视窗单位 视窗单位有两种:vw 和 vh。它们的意思是 viewport width 和 viewport height。1vw 等于视窗宽度的 1%,1vh 等于视窗高度的 1%。在这里…

    css 2023年6月9日
    00
  • 关于CSS Tooltips(鼠标经过时显示)的效果

    Sure! 首先,CSS Tooltips 是一种通过纯 CSS 实现的鼠标经过时会出现提示文字的效果,对于网站 UX 有很好的补充作用。接下来,我会详细讲解如何制作这种效果,包括两个示例说明。 制作 CSS Tooltips 效果 第一步:创建 HTML 结构 首先,在你的 HTML 文件中,需要创建一个包含提示文字的元素并加上一个 data 属性来表示提…

    css 2023年6月10日
    00
  • p​h​p​c​m​s​栏目调用详解

    PHPcms栏目调用详解 如果想要在 PHPcms 网站中调用某个栏目下的文章或子栏目信息,可以使用如下代码: {php} $catid = 1;//需要调用的栏目ID $categorys = getcache(‘category_content_1′,’commons’); $catid = intval($catid); $data = array()…

    css 2023年6月9日
    00
  • vuejs实现标签选项卡动态更改css样式的方法

    实现标签选项卡动态更改CSS样式是Vue.js开发中常见的需求之一。下面是一份实现该功能的完整攻略。 第一步:创建Vue组件 我们首先需要创建一个Vue组件来实现标签选项卡的功能和CSS样式的动态更改。下面是一个基本的组件示例。 <template> <div class="tab"> <div class=…

    css 2023年6月10日
    00
  • 使用JavaScript和CSS实现简单的字符计数器

    使用JavaScript和CSS实现简单的字符计数器,需要按以下步骤进行: 1. 添加HTML代码 打开你的HTML文件,添加一个textarea元素和一个span元素,如下所示: <textarea id="textarea" onkeyup="countCharacters()" placeholder=&q…

    css 2023年6月10日
    00
  • 简述CSS中的背景属性background

    请听我给你详细讲解“简述CSS中的背景属性background”的攻略。 一、背景属性background简介 在CSS中,使用background属性来设置一个元素的背景样式,该属性可以用于设置背景颜色、背景图片、背景重复、背景位置以及背景尺寸等,是开发中常用的样式之一。 具体语法如下: background: background-color backg…

    css 2023年6月10日
    00
  • jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)

    引入jquery.guide.js插件 在html文件中引入jquery和jquery.guide.js插件的js文件,同时在head中添加相关的css样式文件,如下所示: “`html jquery.guide.js Demo jquery.guide.js Demo Click the button to trigger the guide popup…

    css 2023年6月9日
    00
  • CSS :visited伪类选择器隐秘往事回忆录

    当我们在网站中使用超链接时,通常会出现一种需求:为点击过的链接提供视觉上的不同样式,以帮助用户明确区分哪些页面已经访问过。 实现这个效果的一种方式就是使用CSS中的:visited伪类选择器。简单来说,:visited选择器可以帮助我们选中已被访问过的链接,以便我们能够对这些链接应用特定的样式。 下面是一份“CSS :visited伪类选择器隐秘往事回忆录”…

    css 2023年6月9日
    00
合作推广
合作推广
分享本页
返回顶部