开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何让桌子的身体滚动但是将头部固定到位？

要实现这个效果，可以使用CSS样式来实现。具体步骤如下：

将表格的头部和身体分别放在不同的容器中，例如使用<div>标签。
为头部容器设置position: fixed;样式，并指定top和left属性，使其固定在页面的顶部。
为身体容器设置overflow-x: auto;样式，使其在水平方向上出现滚动条。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head><style>
  .table-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: white;
  }
  .table-body {
    overflow-x: auto;
    height: 300px;
  }
</style>
</head>
<body>

<div class="table-header">
 <table>
   <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
      </tr>
    </thead>
  </table>
</div>

<div class="table-body">
 <table>
   <tbody>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
      </tr>
      <!-- more rows -->
    </tbody>
  </table>
</div>

</body>
</html>

这样，当表格的宽度超过容器宽度时，只有表格的身体部分会出现滚动条，而表格的头部则会固定在页面顶部。

相关搜索:如何让UITableView的固定标题在滚动后隐藏如何让页面内容滚动到固定位置的按钮后面？如何将元素固定在可水平滚动的div中如何让可滚动元素的溢出在固定宽度容器的边界之外仍然可见？如何将SliverAppBar动画固定并在自定义滚动视图的顶部滚动？颤动当向下滚动页面时，如何让粘滞/固定的导航栏在其上方隐藏div？如何让Kamailio将呼叫内部段的``Record Route`头部设置为内部IP？如何将位置固定的子对象放在位置固定的父对象的滚动条上？如何在滚动时将表单元素固定在显示屏的底部？如何在bootstrap 4中只让中央面板滚动，而让导航栏和侧边栏保持在固定的位置？如果表格必须是垂直滚动的，如何将表格的标题固定到页面顶部？如何让我的CSS滚动固定到表头和第一列(我也愿意使用JS或JQuery)当我向下滚动时，如何将导航栏固定到顶部？我也想有一个导航栏上方的图片，当滚动所有的方式当一个特定的div点击我的固定标题时，或者当它从顶部开始是100px的时候，我如何让它滚动离开？如何将一个固定的Div显示在另一个Div后面的底部，像视差一样滚动显示

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Android开发笔记（一百三十六）可折叠工具栏布局CollapsingToolbarLayout

可折叠工具栏布局CollapsingToolbarLayout 上一篇博文《Android开发笔记（一百三十五）应用栏布局AppBarLayout》阐述了如何把Toolbar往上滚动，那反过来，...如果仅仅声明scroll，没有声明其它标志，则滚动效果如下图所示： ? 2、enterAlways : 头部与主体先一起滚动，头部滚到位后，主体继续向上或者向下滚。...具体的滚动说明如下所示：向上滚动：头部先往上收缩，一直滚到折叠的最小高度。然后头部固定不动，主体继续向上滚动。向下滚动：头部固定不动，主体先向下滚动，一直滚到主体全部拉出。然后头部向下展开。...具体的滚动说明如下所示：向上滚动：头部先往上收缩，一直滚到折叠的最小高度。然后头部与主体先一起滚动，头部滚到位后，主体继续向上。向下滚动：头部与主体先一起滚动，一直滚到头部折叠的最小高度。...然后主体向下滚动，滚到位后头部继续向下展开。同时声明scroll、enterAlways和enterAlwaysCollapsed，滚动效果如下图所示： ?

3.2K3 0

笨办法学 Python · 续练习 8：`cut`

在本书的这一部分，通过学习如何优化你的流程，你学到了流程和创造力的一些事情。的确，有阻碍的情况下你不能发挥创造力，但是你应该意识到，改善自己的个人流程的最简单方法是，观察你自己的工作。只做练习还不够。...你只是整天坐在桌子旁边，不需要砍伐树木，或者抓捕城市的罪犯。事实是，任何长时间作者，并且做有压力的事情的工作，可能破坏你的身体。为了避免这样，工作时要跟踪以下事情：你的坐姿标准吗？...挺直的姿势并不是很好，但是驼背也不是。让你的身体放松，并抬起头。你把你的肩膀拉到你的耳朵吗？试着把它们放下来。你绷紧手腕并把它们放在桌子上吗？...这就完成了，所以阅读man的cut页面，看看你可以实现多少，同时检查你在工作时如何保持身体。研究性学习 Unicode 对您的实现有什么影响？...深入学习记住你的身体是你的一部分，你的头脑是重要的想法是完全错误的。将你的身体看做无用的垃圾，只能使你的大脑工作效率较低，让你很长一段时间都不舒服。我建议您尽可能频繁地进行一些身体健康相关的活动。

2272 0

Android开发笔记（一百三十五）应用栏布局AppBarLayout

为了让App页面更加生动活泼，势必要求Toolbar在某些特定的场景上移或者下拉，如此才能满足酷炫的页面特效需要。...如果仅仅声明scroll，没有声明其它标志，则滚动效果如下图所示： ? 2、enterAlways : 头部与主体先一起滚动，头部滚到位后，主体继续向上或者向下滚。...然后头部固定不动，主体继续向上滚动。向下滚动：头部固定不动，主体先向下滚动，一直滚到主体全部拉出。然后头部向下展开。...具体的滚动说明如下所示：向上滚动：头部先往上收缩，一直滚到折叠的最小高度。然后头部与主体先一起滚动，头部滚到位后，主体继续向上。向下滚动：头部与主体先一起滚动，一直滚到头部折叠的最小高度。...然后主体向下滚动，滚到位后头部继续向下展开。 5、snap : 在用户手指松开时，系统自行判断，接下来是全部向上滚到顶，还是全部向下展开。

2K4 0

拯救你的久坐不起！用树莓派改造站立式办公桌：在随机时间升降，还有阻力检测功能

更可怕的是，得病的几率和身体BMI无关，也就是说，就算是养成了每天健身的习惯，也挽回不了久坐对身体的危害。...于是，Kong决定对他的办公桌优化一下，让办公桌能按计划站起来。...真正需要做的是按一个按钮，将桌子升到站立高度。Kong表示，他并不担心站得太久，因此也就不需要过于复杂的控制器，在坐和站之间来回切换。最关键的是，大概每隔一小时左右，就把桌子升上去。...现在，还需要一些方法在控制引脚上以固定的时间间隔发送小电流。再介绍一种常见的小芯片，555定时器。...Kong表示，他知道用一个Linux服务器来移动办公桌的升降是非常过分的。但是它又便宜又简单，还让他学会了如何使用树莓派，何乐而不为呢？

6604 0

界面无小事(九): 做个好看的伸缩头部

github传送门前言之前也是写了RecyclerView的内容, 这次再补充伸缩头部的实现. 港真, 伸缩头部是那种看到第一眼就会爱上的视图效果, 好看又简洁....Constant Value: 1 (0x00000001) 列个表再看下: 参数效果 none 视图将正常运行, 没有折叠行为 pin 视图将固定到位, 直到它到达CollapsingToolbarLayout...也就是说, pin模式下, 下面的滚动视图和图片是同步滑动的, 但是这样的观感其实不好. parallax则改进了这一点, 看起来很和谐, 尽管两者不再同步, 这就是翻译后说的以视差方式滚动了. -...一旦滚动视图到达其滚动范围的末尾, 该视图的其余部分将滚动到视图中. 折叠高度由视图的最小高度定义....但是我感觉体验不好, 会让人有着操作不灵敏的错觉. ?

9782 0

戴上头环即可「重见光明」，微软Project Tokyo项目正在帮助弱视人群重启社交

他棕色的头发上绑着一个带有摄像机的头带，摄像机旁是深度传感器和扬声器。他左右转动自己的头，直到位于头带正前方的摄像头对准桌子另一端的一个人的鼻子。...Theo 说：「我花了五秒才找到你，Martin，」他将头和身体朝向 Martin Grayson 的方向。...Morrison 和 Cutrell 围绕 Project Tokyo，探索迷你版系统是否可以用来帮助盲人或弱视儿童，让他们了解如何利用肢体来与人互动。...研究人员与 Theo 一起玩了一系列游戏，旨在说明当他使用身体和头部与视力正常的人交谈时可能产生的社交力量。在实验室的游戏中，研究人员要解决一组问题。...最终，Project Tokyo 将展示出如何构建可扩展所有用户的能力的智能个人助理。

4351 0

VR将助力首例换头手术帮助患者提前适应新身体

Valery Spiridonov 这是一个被称为Gemini的手术，该治疗过程的第一部分是把患者的头部附接到新身体上，第二部分是将脊髓的头部部分注入到身体里。...如果这两个步骤都能获得成功，Spiridonov能很快知道如何使用他的新肢体进行活动。用Canavero的话来说，该换头手术的成功实施将给病人带来一个崭新的世界。 ?...外科医生将一只猴子的头部移植到一个新身体上，将头部的所有血液事先排空，并储藏在15摄氏度的保温箱内，但需要确保其在移植期间没有遭受到任何的脑部损伤。...其实早在1970年，俄亥俄州克利夫兰的Case Western Reserve University医学院的Robert White就已经在猴子身上成功地完成了第一例动物头部移植手术，但是由于身体的免疫系统与头部相排斥...目前关于人体头部移植仍有很多不确定因素，最大的问题便是脊髓的适配。但是，医生Canavero和患者Spiridonov仍然愿意去尝试，包括使用HTC Vive提前适应手术成功之后将获得的新身体。

7427 0

一个女人的机器人日记

机器人日记：第二天 “我”滚动到了 Sam 的桌子后面打算来跟她简单地聊聊截稿期，但她并没有察觉“我”的到来，我不知道应该怎么做，如果“我”只喊她的名字她肯定会被“我”吓到的。...这一阶段让我感觉非常开心，除了熟练操控了方向键（不要硬压着它，也不要校正过度，只要快速点一下就可以像公司老大一样到处大摇大摆地滚动了），我还发现了怎样让机器人站得更高，才不用一直对着人们的胯部讲话。...但是作为机器人，目前为止能发生最可怕的事情是什么呢？是我不小心进入了一个控制盲区，EmBot 就“假死”在陌生人的桌子后面，我的脸还在屏幕上卡住不动，后来我才知道他们以为我在潜伏着监视他们。...这个阶段还有另一件非常好的事情就是虽然 EmBot 让我在办公室里实体化了，但是展现的只是头部而不是全身，所以工作中没有人看到我怀孕了。...然而我真正的身体正在冒险，享受人类生活。现在我的周末活动都是避免让化学物品伤害还未出生的宝宝，这也是人类肉体的弱点。

8025 0

浅议内滚动布局 - 腾讯ISUX

但是，企业管理系统如此庞大，操作如此频繁，交互如此之多，传统的上下式网站显然很难让用户用得非常得心应手。...新版企业账户中心全站，顶部以及左侧固定，不跟随滚动，右侧主体内滚动，如何实现呢？由于企业产品不用管0.4%的IE6用户，因此，事件就变得简单地多了。...对于固定的头部header或者固定的侧边side, 你可以使用语义明确的position:fixed定位，或者直接使用position:absolute，因为滚动容器跟他们平级，所以，absolute其实就是...以前我们的滚动条是跟浏览器上边缘是靠在一起的，但是，自从变成了内滚动，滚动条是跟网站公用头部下边缘排排站，这会造成什么问题呢？就是一些offset的计算要发生一些变化。...五、结束语由于传统窗体滚动已经深入人心，所以我们可能会觉得内滚动布局似乎有些坑；但是，如果当年是内滚动布局天下，我们又该如何看待新兴的窗体滚动布局呢？

1.4K3 0

浅议内滚动布局

我想了想，好像然后就没有“然后”了，让一个div容器滚动就完事了。然而，事非经过不知难，原理虽然简单没说头，但是细节操作还是有些上手成本的。为了更好理解，我们拿实例说话。...新版企业账户中心全站，顶部以及左侧固定，不跟随滚动，右侧主体内滚动，如何实现呢？由于企业产品不用管0.4%的IE6用户，因此，事件就变得简单地多了。...对于固定的头部header或者固定的侧边side, 你可以使用语义明确的position:fixed定位，或者直接使用position:absolute，因为滚动容器跟他们平级，所以，absolute其实就是...以前我们的滚动条是跟浏览器上边缘是靠在一起的，但是，自从变成了内滚动，滚动条是跟网站公用头部下边缘排排站，这会造成什么问题呢？就是一些offset的计算要发生一些变化。...五、结束语由于传统窗体滚动已经深入人心，所以我们可能会觉得内滚动布局似乎有些坑；但是，如果当年是内滚动布局天下，我们又该如何看待新兴的窗体滚动布局呢？

2.5K5 0

浅议内滚动布局

我想了想，好像然后就没有“然后”了，让一个div容器滚动就完事了。然而，事非经过不知难，原理虽然简单没说头，但是细节操作还是有些上手成本的。为了更好理解，我们拿实例说话。...新版企业账户中心全站，顶部以及左侧固定，不跟随滚动，右侧主体内滚动，如何实现呢？由于企业产品不用管0.4%的IE6用户，因此，事件就变得简单地多了。...对于固定的头部header或者固定的侧边side, 你可以使用语义明确的position:fixed定位，或者直接使用position:absolute，因为滚动容器跟他们平级，所以，absolute其实就是...以前我们的滚动条是跟浏览器上边缘是靠在一起的，但是，自从变成了内滚动，滚动条是跟网站公用头部下边缘排排站，这会造成什么问题呢？就是一些offset的计算要发生一些变化。...五、结束语由于传统窗体滚动已经深入人心，所以我们可能会觉得内滚动布局似乎有些坑；但是，如果当年是内滚动布局天下，我们又该如何看待新兴的窗体滚动布局呢？

1.2K2 0

webview 和 React Native 中吸顶效果实现

，但是跨端应用也能实现很不错的吸顶效果，那么今天我们就来研究一下跨端开发是如何实现吸顶的。...希望通过这篇文章，你将学习到： webview 中吸顶的实现方式。 React Native 中吸顶方法，SectionList 是如何实现吸顶的。...在目标区域在屏幕中可见时，它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed，它会固定在目标位置。...<ScrollView stickyHeaderIndices={[0]}//第一个子元素即头部组件，上滑时吸顶 /> stickyHeaderIndices: 一个子视图下标的数组，用于决定哪些成员会在滚动之后固定在屏幕顶端...举个例子，传递stickyHeaderIndices={[0]}会让第一个成员固定在滚动视图顶端。这个属性不能和horizontal={true}一起使用。

3K1 0

【研究院】CHI 2016大会丨人机交互进入手感操作时代

研究团队通过控制使用者在VR中看到的虚拟的身体和虚拟的世界图像，让使用者产生错觉，当使用者触碰VR世界里的不同物体时，其实际只是在反复触碰现实世界中的一个物体，从而实现真实的触觉反馈。...当他们偏转头部的时候，眼睛未注视处的VR世界便会产生轻微地位移，使VR世界中虚拟物体的位置与现实世界中方块的位置对应上。...当参与者每次摸向指定的不同位置的方块时，其实他每次触碰的依然只是桌子上唯一的小方块。 ? 在最后一个场景里，研发团队同时扭曲参与者手和方块的图像，让这两者与现实世界中手和方块的位置相符合。...这一项目的基本思路是将具有传感作用的电容式纤维，与棉、毛或人造纤维等原料混合编织进衣物，并制作成衣服，玩偶，座椅，窗帘等可交互的媒介。 ?...，如何最优化的设计依然还未形成一个业界定律。

7633 0

一个人吃火锅算什么？这个机器人一个「人」也能把自己修好

除了刚刚展示的拧螺钉，此前它已掌握了擦桌子、叠毛巾、打台球以及从冰箱里取出啤酒这种具备一定难度的动作。它能将一堆毛巾分拣开来，叠成四四方方的豆腐块，并码放整齐： ?...但是，它有一个和人类很像的动作难点：那就是，自己对于身体的有些部位是够不着的，所以有时候机器人也会找自己的机器人朋友来帮忙，就像人类朋友之间互相帮涂防晒霜，或者还有一个更经典的场景就是搓背。...挂钩安装好以后，研究人员将一个手提袋挂在钩上来测试操作结果。鉴于机器人已经掌握了拧紧螺钉的技巧，它也就能够开始给自己的身体安装新的硬件。...它在肩膀（或者更应该说颈部）的部分有一些固定点，可以操纵这些固定点来对自己的身体进行修改。 ?...PR2 是根据自己的 CAD 数据计算出来的这个姿势，然后人就可以将许多的罐子放进包包里，让 PR2 放在肩膀上。但如果这个螺钉需要使用六角扳手呢？

3392 0

史上最易懂——ReactNative分组列表SectionList使用详情及示例详解

本文重点介绍SectionList，SectionList支持下面的常用功能：　　完全跨平台　　支持水平布局模式　　行组件显示或隐藏时可配置回调事件　　支持单独的头部组件　　支持单独的尾部组件...如果你的行高是固定的，getItemLayout用起来就既高效又简单，类似下面这样： getItemLayout={(data, index) => ( {length: 行高, offset: 行高 ...比如，0.5表示距离内容最底部的距离为当前列表可见长度的一半时触发 onRefresh void 如果设置了此选项，则会在列表头部添加一个标准的RefreshControl控件，以便实现“下拉刷新”的功能...比如说，viewPosition 为0时将这个列表项滚动到可视区顶部 (可能会被顶部粘接的header覆盖), 为1时将它滚动到可视区底部, 为0.5时将它滚动到可视区中央。...viewOffset是一个以像素为单位，到最终位置偏移距离的固定值，比如为了弥补粘接的header所占据的空间注意: 如果没有设置getItemLayout，就不能滚动到位于外部渲染区的位置。

4.5K14 0

TI 工程师DIY的迷你BB-8机器人

这个机器人可以像球一样四处滚动，但滚动的过程中，它的头部却始终悬浮于身体上方。对于一般的孩子们而言，一个头部可以悬浮在滚动身体上的机器简直是不可思议。...原来，Mark的秘诀是采用内置磁铁来让整个头部保持平衡。 ? “这个机器人的核心就在于其重量足够的球身和磁铁”，Mark说道，“不过，完全使用乐高进行拼装却不那么容易。”...“当我把未加工的原型设计展现在他面前时，他的眼前一亮，”Mark说，“James对它大加赞赏，他觉得我赢定了。”于是，James用画笔将这个小球装扮成了电影中BB-8机器人的样子。...“如果得到乐高的青睐，这个机器人就会从一项业余小创造摇身一变成为热销商品，这简直太让人兴奋了！”...现在，他们的女儿Effie已经1岁了，所以他们将注意力更多的放在了亲子活动上。例如和邻里街坊的其他爸爸们一起在附近的公园中为他们的孩子建造了一个缩小版的高尔夫球场。

6649 0

元素滚动 scroll 系列

页面被卷去的头部如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部。滚动条在滚动时会触发 onscroll事件。...3.案例：仿淘宝固定右侧侧边栏原先侧边栏是绝对定位当页面滚动到一定位置，侧边栏改为固定定位页面继续滚动，会让返回顶部显示出来 4.案例分析: 需要用到页面滚动事件 scroll...则是 window.pageYOffset 其实这个值可以通过盒子的 offsetTop可以得到，如果大于等于这个值，就可以让盒子固定定位了 //1....一定要写到滚动的外面 var bannerTop = banner.offsetTop // 当我们侧边栏固定定位之后应该变化的数值 var sliderbarTop...// 3 .当我们页面被卷去的头部大于等于了 172 此时侧边栏就要改为固定定位 if (window.pageYOffset >= bannerTop) {

1.1K2 0

1.元素滚动 scroll 系列

页面被卷去的头部如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部。滚动条在滚动时会触发 onscroll事件。...1.3.案例：仿淘宝固定右侧侧边栏原先侧边栏是绝对定位当页面滚动到一定位置，侧边栏改为固定定位页面继续滚动，会让返回顶部显示出来 1.4.案例分析: 需要用到页面滚动事件 scroll...则是 window.pageYOffset 其实这个值可以通过盒子的 offsetTop可以得到，如果大于等于这个值，就可以让盒子固定定位了 //1....一定要写到滚动的外面 var bannerTop = banner.offsetTop // 当我们侧边栏固定定位之后应该变化的数值 var sliderbarTop...// 3 .当我们页面被卷去的头部大于等于了 172 此时侧边栏就要改为固定定位 if (window.pageYOffset >= bannerTop) {

7682 0

元素滚动 scroll 系列

页面被卷去的头部如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部。滚动条在滚动时会触发 scroll事件。...3.案例：仿淘宝固定右侧侧边栏原先侧边栏是绝对定位当页面滚动到一定位置，侧边栏改为固定定位页面继续滚动，会让返回顶部显示出来案例分析: 需要用到页面滚动事件 scroll ...则是 window.pageYOffset 其实这个值可以通过盒子的 offsetTop可以得到，如果大于等于这个值，就可以让盒子固定定位了 //1....一定要写到滚动事件的外面 var bannerTop = banner.offsetTop // 当我们侧边栏固定定位之后应该变化的数值 var...// 3 .当我们页面被卷去的头部大于等于了 bannerTop 此时侧边栏就要改为固定定位 if (window.pageYOffset >= bannerTop) {

1.2K3 0

程序员保持健康的7个秘诀

只有当你失去的时候，你才会去珍惜，健康就是如此。我们都知道健康的重要性，但我们常常忽略它。在这篇文章中，我们将分享一些技巧，帮助作为程序员的你保持健康。...它能增强身体免疫力，改善身体健康状况，并且让你的精神更饱满，能更快速地满血复活。后者当你的工作压力大或精神极度紧绷时尤其重要。 ? 重复性劳损（RSI）是程序员的普遍问题。...即使办公室都配备了舒适、符合人体工程学的椅子和桌子，但你还得意识到你的姿势很重要。...如果你没有听说过这样的桌子，那么看它的名字就知道它是什么样的桌子。立式桌甚至并不是很贵。如果你想尝试一下立式桌，那么先要考虑到你的身体需要一些时间来适应这种新的设置。...咖啡因无非是一种直接作用于中枢神经系统的分子。多年来，研究人员发现了很多有趣的关于咖啡因以及它们如何影响人的表现的发现。例如，定期消耗咖啡因的人往往会对它产生依赖。

67211 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭