css固定表头，表单内容可以滑动

最新推荐文章于 2023-05-19 10:26:16 发布
最新推荐文章于 2023-05-19 10:26:16 发布
阅读量136 收藏
点赞数
原文链接：http://www.cnblogs.com/camilla/p/7582193.html
版权

<html>
<head>
    <meta charset="utf-8">
    <title>Table</title>
    <style type="text/css">
        .table{
            width: 100%;
            border-collapse:collapse;
            border-spacing:0;
        }
        table thead, tbody tr {
            display:table;
            width:100%;
            table-layout:fixed;
        }
        .fixedThead{
            width: calc( 100% - 1em )
        }
        .scrollTbody{
            display: block;
            height: 262px;
            overflow: auto;
            width: 100%;
            overflow-y:scroll;
        }
        .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-left: 1px solid #EB8;
            border-bottom: 1px solid #B74;
        }
        /*thead.fixedThead tr th:last-child {
            color:#FF0000;
            width: 218px;
        }*/
    </style>
</head>
<body >
<table class="table">
    <thead class="fixedThead">
    <tr><th>header</th><th>header two</th></tr>
    </thead>
    <tbody class="scrollTbody">
    <tr><td>fuck 1</td><td>fuck 2</td></tr>
    <tr><td>fuck 1</td><td>fuck 2</td></tr>
    <tr><td>fuck 1</td><td>fuck 2</td></tr>
    <tr><td>fuck 1</td><td>fuck 2</td></tr>
    <tr><td>fuck 1</td><td>fuck 2</td></tr>
    <tr><td>fuck 1</td><td>fuck 2</td></tr>
    <tr><td>fuck 1</td><td>fuck 2</td></tr>
    <tr><td>fuck 1</td><td>fuck 2</td></tr>
    <tr><td>fuck 1</td><td>fuck 2</td></tr>
    <tr><td>fuck 1</td><td>fuck 2</td></tr>
    <tr><td>fuck 1</td><td>fuck 2</td></tr>
    <tr><td>fuck 1</td><td>fuck 2</td></tr>
    <tr><td>fuck 1</td><td>fuck 2</td></tr>
    <tr><td>fuck 1</td><td>fuck 2</td></tr>
    <tr><td>fuck 1</td><td>fuck 2</td></tr>
    <tr><td>fuck 1</td><td>fuck 2</td></tr>
    <tr><td>fuck 1</td><td>fuck 2</td></tr>
    <tr><td>fuck 1</td><td>fuck 2</td></tr>
    <tr><td>fuck 1</td><td>fuck 2</td></tr>
    <tr><td>fuck 1</td><td>fuck 2</td></tr>
    <tr><td>fuck 1</td><td>fuck 2</td></tr>
    <tr><td>fuck 1</td><td>fuck 2</td></tr>
    <tr><td>fuck 1</td><td>fuck 2</td></tr>
    <tr><td>fuck 1</td><td>fuck 2</td></tr>
    <tr><td>fuck 1</td><td>fuck 2</td></tr>
    <tr><td>fuck 1</td><td>fuck 2</td></tr>
    <tr><td>fuck 1</td><td>fuck 2</td></tr>
    <tr><td>fuck 1</td><td>fuck 2</td></tr>
    <tr><td>fuck 1</td><td>fuck 2</td></tr>
    <tr><td>fuck 1</td><td>fuck 2</td></tr>
    <tr><td>fuck 1</td><td>fuck 2</td></tr>
    <tr><td>fuck 1</td><td>fuck 2</td></tr>
    <tr><td>fuck 1</td><td>fuck 2</td></tr>
    <tr><td>fuck 1</td><td>fuck 2</td></tr>
    <tr><td>fuck 1</td><td>fuck 2</td></tr>
    <tr><td>fuck 1</td><td>fuck 2</td></tr>
    <tr><td>fuck 1</td><td>fuck 2</td></tr>
    <tr><td>fuck 1</td><td>fuck 2</td></tr>
    </tbody>
</table>
</body>
</html>

转载于:https://www.cnblogs.com/camilla/p/7582193.html

weixin_30588827
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML表头可以随表单内容横向滚动，内容可横可纵滚动
03-21
HTML div实现表头可以随表单内容横向滚动，表单内容可横可纵滚动
table表头固定，表格数据内容滚动
工作中学习，学习中进步
02-18 722
目的：方便运营人员查看第二屏的数据，能直观的查看数据对应关系 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>table表头固定</title> <style> table{ border-collapse: collapse; bord
CSS3 实现表头固定滚动
Rao的博客
08-25 446
核心思想 主要使用CSS 3的新特性 position: sticky; sticky 是 relative 和 fixed 两者的结合体, 通常用在内容滚动的时候，固定滚动的内容 通常搭配的css 样式 top: 0px; z-index: 2; position: sticky !important; top需要指定偏移量，保证固定位置，注意：top, bottom, right, left 至少要一个 z-index ，当内容滚动时，保持固定内容在上一层 !important 表示该样式
一款漂亮的滑动表单
fengqingxin的专栏
03-05 165
&lt;h1&gt;Fancy Sliding Form with jQuery&lt;/h1&gt; &lt;div id="wrapper"&gt; &lt;div id="steps"&gt; &lt;form id="formElem" name="formElem" action="" meth
JS实现table表格固定表头且表头随横向滚动而滚动
10-19
主要介绍了JS实现table表格固定表头且表头可以随横向滚动而滚动,需要的朋友可以参考下
html静态网页（导航条、表格、表单、音视频插入、照片框等）
03-29
CSS3可以帮助我们定制表单样式，如按钮形状、输入框边框、提示文字等。 音视频插入是现代网页的一个重要特性，HTML5引入了`<audio>`和`<video>`标签，使得无需插件即可直接在网页中播放多媒体。开发者可以设置...
功能强大的jquery表单特效
03-30
另外，还可以使用`slideToggle`来创建滑动效果，让表单的展开和折叠更为动态。 其次，分页功能是大型数据展示时常用的一种策略，它能帮助用户更有效地浏览大量信息。jQuery提供了多种插件，如jQuery UI的pager组件...
HTML常用标记说明和CSS属性设置对照表.pdf
10-05
3. `<th>`：表格标题标记，用于创建表头。 4. `<td>`：单元格标记，包含表格数据。 5. `<caption>`：表格标题标记，显示在表格上方。 6. `border`：设置表格边框的宽度。 7. `bgcolor`：定义表格的背景颜色。 8. `...
Tablet-Form:平板电脑表格此表格是动画和验证的基础。在此项目中，我使用了HTML，JavaScript，Jqueary和CSS
03-21
同时，JavaScript也可以实现表格的动画效果，比如淡入淡出、滑动显示等。 **jQuery** jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理、动画设计和Ajax交互。在这个项目中，jQuery可能被用来加速和简化...
css实现table表头固定，主体tbody部分出现滚动条
笑到世界都狼狈的博客
04-02 2765
首先，这是原文链接：https://www.mybj123.com/667.html，作者也写的比较好，但是我在原文的基础上，也发挥了一下自己的头脑，做了一点补充。 下面是我结合作者的代码做了一些修改的代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
css 设置 table 样式：表头固定，内容垂直方向滚动
来杯卡布奇诺的博客
02-10 1333
需要实现下面样式的表格，其中，表头固定、内容垂直方向滚动、鼠标悬停高亮、点击高亮。
【CSS】使用 sticky 实现头部固定，主体内容滚动，但是头部不动的效果
y_coder的博客
05-19 5784
时，元素会在正常文档流中占据其原本的位置，但当页面滚动时，元素会变为固定定位（fixed），直到它达到了指定的滚动位置，然后又会回到正常文档流中。可以使用CSS中的position属性和z-index属性来实现页面头部固定，下面随着内容的增多滚动，但是头部不动的效果。这使得position: sticky;非常适合于创建在页面滚动过程中保持在特定位置的导航栏、表头、侧边栏等元素。当元素的position设置为。这样头部就会固定在页面顶部了。
html固定表头，表单内容垂直循环滚动
大前端程序猿
10-17 8517
项目中需要实现一个html页面，页面中的table内容垂直滚动显示数据，如下图所示： 下面记录实现以上功能的代码： Bootstrap 101 Template .content { width: 500px; margin: 50px 50px;
CSS实现表格表头（thead）固定，内容（tbody）滚动
热门推荐
珍妮的小罐君
03-20 2万+
前言 最近在写一个项目，然后要实现表头固定，tbody内容滚动的效果，该项目中没有使用任何插件，并且表格列数蛮多的，刚开始实现起来遇到各种问题，感觉蛮复杂的，后来找到了一种利用transform的方法实现，效果还不错，请看代码~~~~~~————代码————&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="...
css 表单头部固定
weixin_30707875的博客
04-08 357
原创 https://blog.csdn.net/q3585914/article/details/69946478 table表头和首列的表格固定-CSS实现的Table表头固定 原创2017年04月10日 14:06:21 标签： 固定表头/ css/ html 14190 效果就是上图 表头是固定的，跟随滑动轴动，左边第一列也是可以...
CSS3 图文列表 | 滑动显示表格 | 表单样式 详解！！！
weixin_44793212的博客
11-13 638
????图文列表???? 1.网页效果 内容： 1.点击图片激活超链接。 2.设置浮动后且并排显示，并设计左右补丁 3.当鼠标经过图片时 ，边框变色起到一种选中效果 代码： 2.滑动显示表格 电脑端： 手机端： 代码： 3.表单样式 ...
纯css实现内容可滚动的表格
议军饷
08-17 4102
实现纯css实现内容可滚动的表格，需要将表格的内容（tbody，tr，thead，td等元素的display属性设为block） 表格的HTML代码 &lt;table class="scrollTable"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th class="field1Th"&gt;field1Th&lt;/th&gt; &lt;th c
H5+Vuejs实现锁定表头和首列的可滑动表格
lijian1975的博客
06-14 6038
滑动插件使用了iscroll插件。iscroll插件下载地址：iscroll5demo github地址： https://github.com/leejian1975/h5-table-scroll
原生table表格，固定表头，表格内容可滚轮滑动
最新发布
07-13
要实现一个固定表头且表格内容可滚动的效果，您可以使用 CSS 中的 `position: fixed` 和 `overflow: scroll` 属性。以下是一个示例的 HTML 和 CSS 代码： ```html <th>Header 1 <th>Header 2 <th>Header ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值