首页 > 其他分享 >纯CSS实现table固定thead,tbody进行滚动

纯CSS实现table固定thead,tbody进行滚动

时间:2023-07-11 09:00:31浏览次数:48  
标签:1990 13682299090 18 tbody background table border CSS

代码一

<!--
 * @Descripttion: 
 * @version: 
 * @Author: yang_ft
 * @Date: 2020-09-29 13:59:26
 * @github: famensaodiseng
 * @LastEditTime: 2020-10-10 17:13:17
-->
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>纯css固定表格头部滚动内容</title>

  <style>
    .box {
      width: 1000px;
      height: 100%;
      margin: 100px auto;
      background-color: skyblue;
      padding: 20px;
    }

    table {
      border-collapse: collapse;
      background-color: rgba(20, 18, 65, 0.6);
      text-align: center;
      border: 1px solid #000;
      color: #fff;
    }

    caption {
      color: rgb(10, 10, 10);
    }

    th {
      width: 200px;
      height: 50px;
      background-color: rgb(39, 55, 153);
    }

    td {
      height: 50px;
    }

    tr:nth-child(even) {
      background: rgba(3, 96, 255, 0.25);
    }

    tr:hover {
      background: #aedaff;
    }

    table thead {
      display: block;
      width: 100%;
      background: #ddd;
    }

    table tbody {
      display: block;
      height: 300px;
      overflow: auto;
    }

    table td,
    table th {
      width: 200px;
      border-bottom: none;
      border-left: none;
      border-right: 1px solid #CCC;
      border-top: 1px solid #DDD;
      padding: 2px 3px 3px 4px
    }

    table tr {
      border-bottom: 1px solid #B74;
    }

    /* 滚动条样式 content_l 也可以不自定义*/
    tbody::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 2px;
      /*高宽分别对应横竖滚动条的尺寸*/
      height: 1px;
    }

    tbody::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 2px;
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background: #ffffff;
    }

    tbody::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      border-radius: 10px;
      background: rgba(3, 96, 255, 0.25);
    }
  </style>
</head>

<body>
  <div class="box">
    <table border="1">
      <caption>
        <h3>CSS固定表格头部</h3>
      </caption>
      <thead>
        <tr>
          <th>测试</th>
          <th>测试</th>
          <th>测试</th>
          <th>测试</th>
          <th>测试</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>11111</td>
          <td>22222</td>
          <td>33333</td>
          <td>44444</td>
          <td>55555</td>
        </tr>
        <tr>
          <td>11111</td>
          <td>22222</td>
          <td>33333</td>
          <td>44444</td>
          <td>55555</td>
        </tr>
        <tr>
          <td>11111</td>
          <td>22222</td>
          <td>33333</td>
          <td>44444</td>
          <td>55555</td>
        </tr>
        <tr>
          <td>11111</td>
          <td>22222</td>
          <td>33333</td>
          <td>44444</td>
          <td>55555</td>
        </tr>
        <tr>
          <td>11111</td>
          <td>22222</td>
          <td>33333</td>
          <td>44444</td>
          <td>55555</td>
        </tr>
        <tr>
          <td>11111</td>
          <td>22222</td>
          <td>33333</td>
          <td>44444</td>
          <td>55555</td>
        </tr>
        <tr>
          <td>11111</td>
          <td>22222</td>
          <td>33333</td>
          <td>44444</td>
          <td>55555</td>
        </tr>
        <tr>
          <td>11111</td>
          <td>22222</td>
          <td>33333</td>
          <td>44444</td>
          <td>55555</td>
        </tr>
      </tbody>
    </table>


  </div>
</body>

</html>

 

代码二

<!DOCTYPE HTML>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>table表格,thead固定,tbody滚动条</title>
  <style>
    table {
      border-collapse: collapse;
    }

    table tbody {
      display: block;
      height: 195px;
      overflow-y: scroll;
    }

    table thead,
    tbody tr {
      display: table;
      width: 99.99%;
      /* 如果此处写100%会出现横向滚动条 */
      table-layout: fixed
    }

    table thead {
      width: calc(100% - 1em)
    }

    table thead th {
      background: #ccc;
    }
  </style>
</head>

<body>
  <table width="80%" border="1">
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>出生年月</th>
        <th>手机号码</th>
        <th>单位</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>18</td>
        <td>1990-9-9</td>
        <td>13682299090</td>
        <td>阿里巴巴</td>
      </tr>
      <tr>
        <td>张三封</td>
        <td>18</td>
        <td>1990-9-9</td>
        <td>13682299090</td>
        <td>阿里巴巴与四十大盗</td>
      </tr>
      <tr>
        <td>张小三</td>
        <td>18</td>
        <td>1990-9-9</td>
        <td>13682299090</td>
        <td>腾讯科技</td>
      </tr>
      <tr>
        <td>张三</td>
        <td>18</td>
        <td>1990-9-9</td>
        <td>13682299090</td>
        <td>浏阳河就业</td>
      </tr>
      <tr>
        <td>张三疯子</td>
        <td>18</td>
        <td>1990-9-9</td>
        <td>13682299090</td>
        <td>阿里巴巴</td>
      </tr>
      <tr>
        <td>张三</td>
        <td>18</td>
        <td>1990-9-9</td>
        <td>13682299090</td>
        <td>阿里巴巴</td>
      </tr>
      <tr>
        <td>张大三</td>
        <td>18</td>
        <td>1990-9-9</td>
        <td>13682299090</td>
        <td>阿里巴巴</td>
      </tr>
      <tr>
        <td>张三五</td>
        <td>18</td>
        <td>1990-9-9</td>
        <td>13682299090</td>
        <td>阿里巴巴</td>
      </tr>
      <tr>
        <td>张刘三</td>
        <td>18</td>
        <td>1990-9-9</td>
        <td>13682299090</td>
        <td>阿里巴巴</td>
      </tr>
      <tr>
        <td>张三</td>
        <td>18</td>
        <td>1990-9-9</td>
        <td>13682299090</td>
        <td>阿里巴巴</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

 

标签:1990,13682299090,18,tbody,background,table,border,CSS
From: https://www.cnblogs.com/Fooo/p/17542853.html

相关文章

  • optimize table 治理mysql 高水位和空间碎片
    问题背景随着系统上线时间的增长,mysql数据库的数据目录的文件系统使用率已经快要耗尽。从最初的两三个月truancate一次日志表,到最后每周要truancate多次日志表。业务侧将数据库中历史数据(超过全部数据的2/3)逐渐进行了迁移(采用目标库insert,源库delete的方式),这些表中有多个超过1......
  • CSS 父元素没有设置高度,子元素如何跟父元素保持一样的高度?
    如上图所示,height属性需要让父元素有高度,所以,h2的::before设置了百分比高度就行不通。样式如下所示:h2{&::before{content:"";display:inline-block;width:0.5rem;height:100%;border-top-right-radius:0.5rem;border-bottom-left-......
  • CSS
    .css/*author:weiyupengdate:2023/7/810:09*/#para2{font-size:xxx-large;}/*背景样式*/body{/*背景色*/background-color:mintcream;/*背景图*/background-image:url("../image/img1.png");/*背景图是否重复*/background-repeat:rep......
  • css 隐藏滚动条
    &:那个元素有滚动条,就是那个元素scrollbar-width:none;/*Firefox*/-ms-overflow-style:none;/*IE10+*/&::-webkit-scrollbar{display:none;/*ChromeSafari*/}传送门:https://blog.csdn.net/Umbrella_Um/article/details/114144718......
  • [数据分析与可视化] 基于plottable库绘制精美表格
    plottable是一个Python库,用于在matplotlib中绘制精美定制的图形表格。plottable的官方仓库地址为:plottable。本文主要参考其官方文档,plottable的官方文档地址为:plottable-doc。plottable安装命令如下:pipinstallplottable本文所有代码见:Python-Study-Notes#jupyternoteboo......
  • CSS_相关问题及解决_持续更新
    css_margin塌陷问题问题描述<divclass="father"><divclass="child1"></div><divclass="child2"></div></div>当child1设置了margin-top时,margin-top会作用在father上当child2设置了margin——bottom时,margin-b......
  • 1. Q_ CSS 属性是否区分大小写_
    Q:CSS属性是否区分大小写?```ul{MaRGin:10px;}```A:不区分。HTML,CSS都对大小写不敏感,但为了更好的可读性和团队协作一般都小写,而在XHTML中元素名称和属性是必须小写的。......
  • AI绘画:StableDiffusion炼丹Lora攻略-实战萌宠图片生成
    写在前面的话近期在小红书发现了许多极其可爱、美观的萌宠图片,对这些美妙的图像深深着迷于是想着看看利用AI绘画StableDiffusion以下简称(SD)做出来。以下是详细实操的全过程,包括所有用的资料已经打包到网盘。最后尝试的最终效果如下:更多图片请查看网盘:「萌宠图片及关键词」......
  • stable
      快速启动StableDiffusionWebUI详情  实验手册实验报告 4.运行教程文件在打开的教程文件stable_diffusion_webui.ipynb文件中,您可以直接看到教程文本,您可以在教程文件中直接运行教程。本教程一共4个运行步骤:1.1下载stable-diffu......
  • R语言中 table函数统计不了NA
     001、vec2<-c(3,NA,6,5,NA,NA,8,9,NA,4,7,8)##测试向量vec2table(vec2)vec2table(vec2,useNA="always")##统计NA,增加参数useNA="always".  ......