如何为 TBODY 应用垂直滚动条

2024-05-19

我的表中有 4 列和 5 行数据。我必须为 TBODY 应用垂直滚动条,TH 标题内容不应滚动。

我对场景进行了编码,并且在我将滚动类应用于 TBODY 之前它工作正常。一旦我将滚动样式类应用于 TBODY,它就会破坏之前的对齐方式。任何人都可以帮助解决这个问题..谢谢

 <table class="banker-list">
            <colgroup><col width="40%"><col width="23%"><col width="24%"><col width="13%"></colgroup>
            <thead>
                <tr>
                    <th><p class="fieldLabel">Banker<span class="requiredFieldIndicator">*</span></p></th>
                    <th><p class="fieldLabel">High Balance (<span class="seg-hb">30</span>)</p></th>
                    <th><p class="fieldLabel">High Potential (<span class="seg-hp">60</span>)</p></th>
                    <th><p class="fieldLabel">Core (<span class="seg-core">10</span>)</p></th>
                </tr>
            </thead>
            <tbody class="bankerScroll">
                <tr>
                    <td><input class="banker-name" name="send-to-banker" id="banker_0" type="checkbox"> <label for="banker_0">JOHN</label></td>
                    <td><input name="banker_0_segment" disabled="disabled" type="checkbox"></td>
                    <td><input name="banker_0_segment" disabled="disabled" type="checkbox"></td>
                    <td><input name="banker_0_segment" disabled="disabled" type="checkbox"></td>
                </tr>
                <tr class="oddRow">
                    <td><input class="banker-name" name="send-to-banker" id="banker_1" type="checkbox"> <label for="banker_1">JOHN</label></td>
                    <td><input name="banker_1_segment" disabled="disabled" type="checkbox"></td>
                    <td><input name="banker_1_segment" disabled="disabled" type="checkbox"></td>
                    <td><input name="banker_1_segment" disabled="disabled" type="checkbox"></td>
                </tr>
                <tr>
                    <td><input class="banker-name" name="send-to-banker" id="banker_2" type="checkbox"> <label for="banker_2">JOHN</label></td>
                    <td><input name="banker_2_segment" disabled="disabled" type="checkbox"></td>
                    <td><input name="banker_2_segment" disabled="disabled" type="checkbox"></td>
                    <td><input name="banker_2_segment" disabled="disabled" type="checkbox"></td>
                </tr>
                <tr class="oddRow">
                    <td><input class="banker-name" name="send-to-banker" id="banker_3" type="checkbox"> <label for="banker_3">JOHN</label></td>
                    <td><input name="banker_3_segment" disabled="disabled" type="checkbox"></td>
                    <td><input name="banker_3_segment" disabled="disabled" type="checkbox"></td>
                    <td><input name="banker_3_segment" disabled="disabled" type="checkbox"></td>
                </tr>
                <tr>
                    <td><input class="banker-name" name="send-to-banker" id="banker_4" type="checkbox"> <label for="banker_4">JOHN</label></td>
                    <td><input name="banker_4_segment" disabled="disabled" type="checkbox"></td>
                    <td><input name="banker_4_segment" disabled="disabled" type="checkbox"></td>
                    <td><input name="banker_4_segment" disabled="disabled" type="checkbox"></td>
                </tr>
            </tbody>
        </table>


TABLE {
    border-collapse: collapse;
    width: 100%;
}
P, TABLE {
    font-family: Verdana;
    text-align: left;
}
.dataRow {
    margin-bottom: 5px;
    margin-top: 5px;
}
.fieldLabel {
    color: #000000;
    font-size: 85%;
    font-weight: bold;
}
.bankerScroll {
    display:block;overflow:auto;height:100px;white-space:nowrap;
}

这是一个工作示例:

http://www.imaputz.com/cssStuff/bigFourVersion.html http://www.imaputz.com/cssStuff/bigFourVersion.html

您必须将 display:block 添加到 thead > tr 和 tbody

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何为 TBODY 应用垂直滚动条 的相关文章

  • 两个 Div 之间的固定宽度间隙

    有谁知道如何修复两个 div 之间的间隙 我有一个主要内容 Div 里面有两个带有图片的 Div 视图的宽度为 768 像素 当我开始拉伸视图时 两张图片开始相互远离 但理想情况下 主要内容 Div 应该在周围有空白的情况下拉伸 并且图片之
  • 如何使用带有 python 的报告实验室将 html 文档转换为 pdf

    我正在尝试使用报告实验室将我创建的 html 文档转换为 pdf html 文档如下 我不确定如何做到这一点 我在网上查看过 似乎找不到解决方案 html文档 h2 Convert to pdf h2 p Lorem ipsum dolor
  • CSS3 box-shadow 用于类似重叠的 div

    我正在尝试用css3来实现这种效果 HTML 代码显然是这样的
  • 使用 实现可访问性的更好做法是什么?

    我有一个下载链接 但我找不到任何良好的可访问解决方案来说明如何处理这种情况 我遵循一个共同的经验法则 按钮做事 链接去地方 我的情况是 我有一个触发文档下载的按钮 同一页面 我相信这应该是一个具有按钮角色的锚点 因为它明确不触发重定向或导航
  • 当 URL 包含片段时,iframe 会导致父元素在 Google Chrome 上向上滚动

    在 Google Chrome 37 0 2062 122 OSX Windows 上 具有包含片段的 URL 的 iframe 会导致父元素向上滚动 它只发生在 Chrome 中 在 Safari 和 Firefox 中测试 这是显示问题
  • 如何动态打破 FlexBox 列以开始新列

    I have a dynamic list of items containing text placed column wise which I need to break after every 5th item 我只有两个限制 每个
  • 垂直对齐复选框标签? [复制]

    这个问题在这里已经有答案了 我有这样的复选框
  • 删除数据表列中的额外填充

    你好 我创建了 JQuery DataTables 如下所示 所以我的问题是如何删除 图片 列中过多的填充 这就是我初始化表的方式 violators tbl DataTable aoColumnDefs bSortable false a
  • 如何重定向到 instagram://user?username={username}

    我的 html 页面上有这个链接 可以在特定用户上打开 Instagram 应用程序 a href Link to Instagram Profile a 我一直在寻找自动运行 url instagram user username USE
  • 禁用引导列上的滚动

    我正在尝试禁用引导列上的滚动 这是我的代码 div class container fluid h 100 div class row h 100 div class col 4 h 100 bg dark fixed div div cl
  • 如何重置使用 JavaScript 更改的 CSS 属性?

    我的导航按钮的宽度从 100px 增加到 150px 当鼠标悬停在 nav li hover width 150px 但是使用 javascript 我已经做到了 无论选择哪个选项 宽度都将继续为 150px 当选择每个选项时 它会使其他选
  • 如何指定网站的语言? (HTML?)

    如何指定页面采用某种语言以便搜索引擎可以理解 这是我放在顶部的元标记吗 如果是 您知道大多数搜索引擎是否使用它来确定语言吗 我已将一页英文内容转换为几种不同的语言 并希望将该信息包含在 html 中 让搜索引擎知道他们正在处理哪种语言 快速
  • 如何设置菜单按钮和菜单项的样式

    我尝试更改菜单按钮中的样式 我可以更改菜单按钮样式 但不能更改其菜单项 无论我尝试什么 菜单按钮内的菜单项都保持不变 menu button fx background color black menu button label fx ba
  • HTML 中部分着色的阿拉伯语单词

    我不会说阿拉伯语 但我需要我们网站上对阿拉伯语的具体支持 我需要将部分阿拉伯语单词放在 span 与单词其他部分的风格不同 当我输入两个字符时 and 它们被组合成word 但是当我使用 HTML 标记时 span span 这些字母在输出
  • 如何在使用页面锚点导航时设置“激活”类以在 Angular 2 中引导导航栏?

    我正在使用 Angular 2 和 Bootstrap 4 创建一个单页网站 我创建了一个始终位于页面顶部的导航栏组件 并且我正在使用页面锚点导航 id 请注意 我还没有创建路由模块 到目前为止还没有必要这样做 导航栏代码如下
  • 提交表单并重定向页面

    我在 SO 上看到了很多与此相关的其他问题 但没有一个对我有用 我正在尝试提交POST表单 然后将用户重定向到另一个页面 但我无法同时实现这两种情况 我可以获取重定向或帖子 但不能同时获取两者 这是我现在所拥有的
  • 避免响应式页面的重复内容

    我目前正在做一个涉及响应式设计的项目 整个布局应该使用HTML和CSS来实现 我知道可以使用 java 脚本将内容从一个列布局移动到另一列布局 而无需复制内容 但是使用 HTML 和 CSS 是否可以实现相同的效果 以下面的例子为例 它会在
  • 指针事件:无,过滤,适用于 ie8 和任何地方,不适用于 ie9

    正如我在这里看到的 https stackoverflow com questions 3680429 click through a div to underlying elements 4839672 4839672 过滤器可用于模拟跨
  • 更改文本输入标签中文本的大小?

    我有一个很大的文本输入框 但我无法更改字体大小
  • CSS 是否有不等于选择器?

    CSS中有类似 不等于 的东西吗 例如 我有以下代码 input 但对于某些输入 我需要将其作废 我想通过将类 reset 添加到输入标签来做到这一点 例如

随机推荐

  • 尝试使用 Ruby Java Bridge (RJB) gem 时出现错误“无法创建 Java VM”

    我正在尝试实现 Ruby Java Bridge RJB gem 来与 JVM 通信 以便我可以运行 Open NLP gem 我在 Windows 8 上安装并运行了 Java 所有迹象 至少我所知道的 都表明 Java 已安装并可运行
  • PHP 共享标头而不使用服务器端脚本?

    到目前为止我总是通过 PHP 解决简单的问题 您有一个包含页眉 菜单 页脚和内容字段的网站 每个页面的页眉 菜单和页脚通常是相同的 在没有 PHP 或任何其他服务器端语言的情况下 如何使页眉 菜单和页脚数据仅存在于一个文件中 例如 您不会有
  • 将带有地理位置数据的照片保存到照片库 Swift 3

    如何使用地理位置元数据将照片保存到照片库 我已请求 并允许 应用程序访问用户位置 private func allowAccessToUserLocation locationManager CLLocationManager locati
  • EC2专用实例是否共享RAM带宽?

    如果我创建一个专用实例并且它在多芯片服务器上启动 它是否共享其自己的 CPU 的 RAM 带宽 如果邻居运行一些消耗内存带宽的任务会发生什么 它会影响我的实例吗 这在共享实例上怎么样 RAM有哪几种寻址方式 仅在其自己的 numa 节点上还
  • 如何手动发送django异常日志?

    我的应用程序中有一个应该返回的特定视图HttpResponse 如果一切都成功完成并且类似HttpResponseBadRequest 否则 此视图适用于外部数据 因此可能会引发一些意外的异常 我当然需要知道发生了什么 所以我有这样的东西
  • Python:在字典中查找具有唯一值的键?

    我收到一个字典作为输入 并且想要返回一个键列表 其中字典值在该字典的范围内是唯一的 我将用一个例子来澄清 假设我的输入是字典 a 构造如下 a dict a cat 1 a fish 1 a dog 2 lt unique a bat 3
  • 如何创建像谷歌位置历史记录一样的Android时间轴视图?

    我想设计像谷歌位置历史这样的用户界面 我必须为我正在使用的应用程序复制此 UIRecyclerView 每行都是水平的LinearLayout其中包含右侧的图标 线条和视图 该线是一个FrameLayout具有圆形背景和半透明圆圈Views
  • 要在子集中显示的非数字条目的维恩图

    我有以下数据框 SET1 SET2 SET3 par1 par2 par1 par2 par3 par2 par3 par4 par5 我想制作一个维恩图 其中所有这些 parX 元素都显示在各自的子集中 即作为标签 而不仅仅是重叠元素的数
  • CSS - div 与父 div 底部对齐(内联块)

    我知道这个 html 很草率 有一些不必要的额外 div 但无论如何 我无法理解为什么 ID 为 info box right 的 div 与父 div 的底部对齐 您可以看到 文本 与下面的 jsfiddle 示例的底部 有什么想法可以让
  • 将 Long 转换为 DateTime 从 C# 日期到 Java 日期

    我一直尝试用Java读取二进制文件 而二进制文件是用C 编写的 其中一些数据包含日期时间数据 当 DateTime 数据写入文件 以二进制形式 时 它使用DateTime ToBinary on C 为了读取 DateTime 数据 它将首
  • 使用 AWS Java SDK 为现有 S3 对象设置 Expires 标头

    我正在更新 Amazon S3 存储桶中的现有对象以设置一些元数据 我想设置 HTTPExpires每个对象的标头以更好地处理 HTTP 1 0 客户端 我们正在使用AWS Java SDK http aws amazon com sdkf
  • 当设置 coord_fixed 时,ggplot/shiny 中的鼠标悬停坐标是错误的

    我正在使用问题中的答案 当您将鼠标悬停在闪亮的 ggplot 上时出现工具提示 https stackoverflow com questions 27965931 tooltip when you mouseover a ggplot o
  • 如何取消 AjaxForm 上的提交

    我正在使用 jQuery 插件 ajax 形式 我尝试实现这样的东西 MyFormID ajaxForm dataType json resetForm true beforeSubmit function validateData ret
  • 如何使用 .babelrc 让 babel-plugin-import 适用于 antd?

    我是 React babel 和 antd 的新手 我安装了 React 并使用 create react app 启动了一个项目 我安装了antd ant design 它建议使用 babel plugin import 所以我也安装了它
  • 如何包含位于模块中但在 Sphinx 中的类和方法之外的文档字符串/注释

    我有一个utils我的包中的模块 它由多个不需要实例化的杂项独立方法组成 我想在其中放置一些通用注释 文档字符串utils文件 例如 import os import json Miscellaneous methods that help
  • 为什么可以通过ref参数修改readonly字段?

    考虑 class Foo private readonly string value public Foo Bar ref value private void Bar ref string value value hello world
  • C# 存档中的文件列表

    我正在创建一个 FileFinder 类 您可以在其中进行如下搜索 var fileFinder new FileFinder new string C MyFolder1 C MyFolder2 new string
  • 使用 file_get_content 发布数据

    我已经做了一些关于如何使用的研究file get content与帖子 我也读过this one https stackoverflow com questions 2445276 how to post data in php using
  • Java直接内存:在自定义类中使用sun.misc.Cleaner

    在 Java 中 NIO 直接缓冲区分配的内存通过以下方式释放 sun misc Cleaner实例 一些比对象终结更有效的特殊幻像引用 这种清洁器机制是否仅针对直接缓冲区子类硬编码在 JVM 中 或者是否也可以在自定义组件中使用清洁器 例
  • 如何为 TBODY 应用垂直滚动条

    我的表中有 4 列和 5 行数据 我必须为 TBODY 应用垂直滚动条 TH 标题内容不应滚动 我对场景进行了编码 并且在我将滚动类应用于 TBODY 之前它工作正常 一旦我将滚动样式类应用于 TBODY 它就会破坏之前的对齐方式 任何人都