首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

固定的行和列HTML表格的水平,垂直滚动,只有CSS

可以通过CSS的属性和值来实现。以下是一种常见的实现方式:

首先,需要将表格包裹在一个固定大小的容器中,设置容器的宽度和高度,并添加overflow: auto;属性,以便在内容溢出时显示滚动条。

接下来,为表格的<thead><tbody>元素设置display: block;属性,使其变为块级元素,并设置宽度为100%。

然后,为表格的<thead>元素设置position: sticky;属性,使其在滚动时保持固定位置。可以通过设置top属性来控制表头的位置。

最后,为表格的<tbody>元素设置overflow-y: scroll;属性,使其在内容溢出时显示垂直滚动条。

下面是一个示例代码:

代码语言:txt
复制
<style>
  .table-container {
    width: 500px;
    height: 300px;
    overflow: auto;
  }

  table {
    width: 100%;
  }

  thead {
    display: block;
    position: sticky;
    top: 0;
    background-color: #f5f5f5;
  }

  tbody {
    display: block;
    overflow-y: scroll;
    height: 250px;
  }
</style>

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>列1</th>
        <th>列2</th>
        <th>列3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>行1列1</td>
        <td>行1列2</td>
        <td>行1列3</td>
      </tr>
      <tr>
        <td>行2列1</td>
        <td>行2列2</td>
        <td>行2列3</td>
      </tr>
      <!-- 更多行... -->
    </tbody>
  </table>
</div>

这样,当表格内容超出容器的宽度或高度时,会显示水平和垂直滚动条,同时表头会固定在容器的顶部。

在腾讯云的产品中,可以使用腾讯云的云服务器(CVM)来搭建网站和应用程序,使用云数据库(CDB)来存储数据,使用云存储(COS)来存储文件和对象,使用云函数(SCF)来运行代码,使用云网络(VPC)来构建网络环境等。具体产品和介绍可以参考腾讯云官方文档:腾讯云产品

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

自适应表头左侧固定表格

但是当表格数据过多时,在同一个屏幕下无法完全展示,出现滚动条后,表头部分就被盖住,很容易不清楚看的当前列所代表意义。...为了解决上述问题,可以想出一个办法就是当表头部分被滚动到浏览器外面,即不在显示区间中,则表头部分固定不动,表格内容滑动,这样就可以方便清楚自己看是哪一了,同理,当浏览器宽度小于表格宽度时,则隐藏超出部分...,让左侧一固定,右侧部分可以滑动,则可以方便知道自己看是哪一。...m-type为第一,如果该行需要合并后面的,则后面m-type内容置空即可(但要保留标签) 左侧部分: 左侧部分为一中m-section为一组,用于划分T+STT高效动力、驾感科技(此类型行宽度占满整个表格...)等 每一个m-section中m-tit为占满整个表格,例如:T+STT高效动力 左侧部分中间部分背景色以斑马线形式分布,odd颜色为深色 中间部分: 中间部分每m-scroll-col

3.9K10

固定表头第一表格实现

概述 在开发时候,我们有时候会有这样需求:由于表格内容比较多,如果横竖都出现滚动条就看不到表头了,这就要求表格表头第一固定,并且出现双向滚动条。...本文就就给大家介绍一种通过cssjs简单实现。 效果 ?...实现思路 1.区域划分 如下图,将整个表格分为四个区域:1、左上区域需要单独出来,因为此区域不参与滚动;2、上部表头,需要固定在顶部并且参与横向滚动;3、左边表头,需要滚动并且参与竖向滚动;4、表格主区域...,会有横竖向滚动,控制顶部左边表头。...2.关键点 tableth或者td里面套一个div并设置宽度,目的是为了撑开table表格,因为单独给th或者td是不起作用

4.8K20

html flex上下居中,css3 flex实现div内容水平垂直居中几种方法

flex-direction:column (从上往下排列==顶对齐) ※ flex-direction:column-reverse (与column 相反) 二、flex-wrap: (内容一容不下时候才有效...wrap 相反) 三、justify-content: (水平对齐方式) ※flex-start (水平左对齐) ※ justify-content:flex-end; (水平右对齐) ※ justify-content...align-items: (垂直对齐方式) ※ align-items:stretch; (默认) ※align-items:flex-start; (上对齐,默认差不多) ※align-items...*/ /*align-self: flex-start;*/ 到此这篇关于css3 flex实现div内容水平垂直居中几种方法文章就介绍到这了,更多相关css3div水平垂直居中内容请搜索萬仟网以前文章或继续浏览下面的相关文章...发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/138974.html原文链接:https://javaforall.cn

3K30

CSS进阶11-表格table

在这种情况下,开发者不应该在文档语言中使用与表格相关元素,而应该将CSS应用于相关结构元素以实现所需布局。 开发者可以将表格视觉格式指定为矩形网格单元格。单元格可以组织成行组组。...组,单元格可以在它们周围绘制边框(CSS 2.2中有两个边框模型)。开发者可以在单元格中垂直水平对齐数据,并可以将一或者一所有单元格数据对齐。...CSS表格模型 CSS表格模型基于HTML4表格模型,其表格结构与表格可视布局紧密相关。在此模型中,表格由可选标题caption任意数量单元格组成。作者在文档语言中明确表格模型被为“主要”。...5.2.1 固定表格布局fixed table layout 使用这种(快速)算法,表水平布局不依赖于单元格内容; 它仅取决于表格宽度,宽度以及borders或者单元格间距cell spacing...如果指定了一个length,则会同时提供水平垂直间距。如果指定了两个,则第一个给出水平间距,第二个给出垂直间距。length不一定是负值。

6.5K20

HTML5 与CSS3 相关笔记

18.表格基本结构:单元格、 (1),,, (2)HTML5中已废除tableborder属性,用css控制边框宽度。...(5)表格特点:同行单元格高度一致且水平对齐,同单元格宽度一致且垂直对齐。...(1) visible默认溢出内容可见,显示在盒子外面 (2)hidden 多出来内容被隐藏且没有滚动条 (3) scroll 有垂直水平2条滚动条,可查看多余内容 (4) auto 如果内容溢出,自动显示滚动条...(4)fixed固定定位 a.特性:直接以浏览器窗口为基准定位,偏移位置不受窗口滚动滚动影响。 b.使用场景:窗口边缘固定广告、返回顶部图标、边缘固定导航栏等。...4、:表格头部一个单元格,表格表头,文本默认粗体且居中显示。 5、:表格一个单元格,一中包含几对这行中就有几个单元格。 6、表格个数,取决于一中数据单元格个数。

5.4K30

如何纯CSS实现标题栏、表格水平滚动垂直滚动

有些报表会很宽,浏览器水平放不下,需要水平滚动显示,这个可以设置overflow-y:hidden实现,很基本实现,没什么难度。但是,如果同时希望垂直滚动时候,表格头是固定。此时该如何实现呢?...box{display:flex;flex-direction:column;}.top{height:30px;}.content{flex:1}但是实现代码比起  :《纯CSS实现标题栏、表格水平滚动垂直滚动...探究 position-sticky 失效问题 https://cloud.tencent.com/developer/article/1765768》下面代码是 使用粘性定位与 flex布局分别实现头部固定代码...转载本站文章《如何纯CSS实现标题栏、表格水平滚动垂直滚动》,请注明出处:https://www.zhoulujun.cn/html/webfront/SGML/html5/2021_0731_8650....html

1.5K00

一篇文章带你了解CSS基础知识基本用法

repeat-y 垂直平铺图片 no-repeat 不平铺图片 5)).背景滚动条 fixed 固定...2)).表格文本对齐 设置水平对齐方式,比如左对齐、右对齐或者居中 td { text-align:right } 设置垂直对齐方式,比如顶部对齐、底部对齐或居中对齐 td { vertical-align...如果定义一个length 参数,那么定义水平垂直间距 如果定义两个length 参数,那么第一个设置水平间距,而第二个设置垂直间距 4)).表格标题位置 caption { caption-side...table-footer-group 元素会作为一个或多个分组来显示(类似 )。 table-row 元素会作为一个表格显示(类似 )。...column-rule-style 之间样式规则 column-rule-color 之间颜色规则 4)).规定宽度数 div { columns:10px 3; -moz-columns

11K20

全栈之前端 | 10.CSS3基础知识之表单表格学习

属性 - 设置表格分隔边框距离 visibility 属性 - 设置表格或其他元素是否可见或不可见 table-layout 属性 - 设置表格单元格、宽带算法 caption-side...表格来呈现,所以此章节我们将学习如何有效地对 HTML 表格进行样式化,以及其相关CSS属性介绍实践。...table-layout 属性 - 设置表格单元格、宽带算法 描述: 此属性定义了用于布局表格单元格、算法,简单说使用 table-layout: fixed 创建更可控表布局,...,允许浏览器更快表格进行布局;这是因为固定表格仅取决于表格宽度、宽度、表格边框宽带,以及单元格间距,而与单元格内容无关;在浏览器渲染时在接收到表格第一后便可显示表格,而后者需要根据内容计算来显示表格所以加载时会稍慢...HTML cellspacing 属性,但是第二个可选值可以用来设置不同于水平间距垂直间距。

14510

CSS大部分属性汇总

hidden 元素是不可见。 collapse 当在表格元素中使用时,此值可删除一或一,它不会影响表格布局。被占据空间会留给其他内容。...table-row 此元素会作为一个表格显示 table-column-group 此元素会作为一个或多个分组来显示 table-column 此元素会作为一个单元格显示 table-cell...,那么它位置相对于: static HTML 元素默认值,即没有定位,遵循正常文档流对象。...fixed 元素位置相对于浏览器窗口是固定位置。 sticky 基于用户滚动位置来定位。...hidden 内容会被修剪,并且其余内容是不可见。 scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余内容。 auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余内容。

1.2K20

建议收藏!总结了42种前端常用布局方案

本篇文章总结了四十二种CSS常见布局,这四十二种布局可以细分为如下几类: 水平居中 垂直居中 水平垂直居中 两布局 三布局 等分布局 Sticky Footer布局 全屏布局 这些内容也正是本篇文章目录...: 300px; width: 300px; background: #e599f7; } 其 HTML 结构也是固定,就是一个父级,其宽度继承了 宽度,还有一个子级,这里是固定300px...定宽块级元素水平居中(方法三) 当元素开启决定定位或者固定定位时, left 属性 right 属性一起设置就会拉伸元素宽度,在配合 width 属性与 margin 属性就可以实现水平居中。...定宽块级元素水平居中(方法四) 当元素开启决定定位或者固定定位时, left 属性 transform 属性即可实现水平居中。...水平垂直居中 实现水平垂直布局基本就是将上面几种方式结合使用,这里总结了7种常用布局方法,其公共 CSS 代码如下所示: body { margin: 0; } .parent { height

4K30

建议收藏!总结了 42 种前端常用布局方案

本篇文章总结了四十二种CSS常见布局,这四十二种布局可以细分为如下几类: 水平居中 垂直居中 水平垂直居中 两布局 三布局 等分布局 Sticky Footer布局 全屏布局 这些内容也正是本篇文章目录...: 300px; width: 300px; background: #e599f7; } 其 HTML 结构也是固定,就是一个父级,其宽度继承了 宽度,还有一个子级,这里是固定300px...定宽块级元素水平居中(方法三) 当元素开启决定定位或者固定定位时, left 属性 right 属性一起设置就会拉伸元素宽度,在配合 width 属性与 margin 属性就可以实现水平居中。...定宽块级元素水平居中(方法四) 当元素开启决定定位或者固定定位时, left 属性 transform 属性即可实现水平居中。...水平垂直居中 实现水平垂直布局基本就是将上面几种方式结合使用,这里总结了7种常用布局方法,其公共 CSS 代码如下所示: body { margin: 0; } .parent { height

4K30

table固定表头,tbody滚动条样式设置以及填几个坑

工作中或许会用到 table 表格固定表头, tbody 滚动效果。为了方便我这里直接用 Bootstrap 表格样式。 ?...比较常用方法是,将 table thead tbody 拆分成两个表格,用 div 包起来,给 div 设置固定高度 overflow: auto; 属性(其实只给 tbody table...至于对齐,可以使用 固定宽度,只需要给第一设置一个宽度,下面的会自动与之对齐。如果表格宽度是 100% ,可以给前几列固定宽度,最后一个不设置,使其宽度自适应。...可以参照 CSS滚动条选择器设置滚动样式,如下。 以下伪元素选择器可以修改 webkit 浏览器滚动条样式: ::-webkit-scrollbar 整个滚动条....滚动条轨道 ::-webkit-scrollbar-track-piece 滚动条没有滑块轨道部分 ::-webkit-scrollbar-corner 当同时有垂直滚动水平滚动条时交汇部分

11.7K20

动手练一练,手写一个价格对比、固定表头滚动表格

虽然有不少相关插件提供了类似的功能,比如 ScrollMagic.js,但是今天实例,我们将用纯原生方式进行实现,当滚动滚动表格位置,固定表头位置,表格内容查看完后,取消固定表头功能。...今天我们将通过一个界面十分漂亮功能价格对比表格,展示固定表头功能,实例操作展示如视频所示,当滚动滚动表格位置,添加表头固定样式,当滚动表格底部,移除固定表头样式。...: 1、Window pageXOffset pageYOffset 属性 pageXOffset pageYOffset 属性返回文档在窗口左上角水平垂直方向滚动像素。...HTML结构CSS完成后,接下来我们编写脚本固定表头。...如果还在滚动表格内容,我们将添加固定表头样式stickyClass,移除取消固定样式sticky2-table。

3.2K31

CSS总结

[center left right] (水平位置)center[left top right] bottom[left center right],x坐标,y坐标[第一个值是水平位置,第二个值是垂直位置...图片依附方式含义是:将图像固定在屏幕某个位置。(但在IE6中只有htmlbody 两个元素支持此属性。)   ...2.制作翻转按钮效果:将两张图片进行合成; 八、CSS技巧 [1]:让盒子水平居中,只需将盒子左右外边距margin设置为auto,即margin:5px auto;   [2]:让盒子内容垂直居中...核心思想是把多张图片合成一张图片里,通过修改背景属性中定位来控制到底显示图片中哪些部分。 [5]:CSS常见布局方式:一居中、一居中、两、三、三....九、CSS元素分类 [1].块状元素:{display:block}一般是其他元素容器,可容纳内联元素其他块状元素,块状元素排斥其他元素与其位于同一,宽度(width)高度(height)起作用

2.1K10

让div水平垂直居中几种方法

前言导读 利用 CSS 来实现对象垂直居中有许多不同方法,比较难是选择那个正确方法。使用 CSS 实现水平居中很容易,但要实现垂直居中并不容易。而且有些方法在一些浏览器中无效。...下面我们看一下使对象垂直集中几种不同方法,以及它们各自优缺点。 表格布局 这个方法把一些 div 显示方式设置为表格,因此我们可以使用表格 vertical-align 属性。...这意味着对象必须在 CSS 中指定固定高度。...但是因为它有固定高度,其实并不能上下都间距为 0,因此 margin:auto; 会使它居中。使用 margin:auto;使块级元素垂直居中是很简单。...缺点: IE(IE8 beta)中无效 无足够空间时,content 被截断,但是不会有滚动条出现 如何让文本水平垂直居中 css居中属性

2.1K20

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券