带滚动条的table (ie only)

最新推荐文章于 2021-06-09 23:57:19 发布
最新推荐文章于 2021-06-09 23:57:19 发布
阅读量822 收藏
点赞数
分类专栏： JavaScript 文章标签： table ie border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/andy1217/article/details/3402250
版权
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <FCK:meta http-equiv="Content-Type" content="text/html; charset=gb2312"  ></FCK:meta> 
  5. <head> 
  6. <style> 
  7. body {background-color: #F0F0F0 ;  font: 11px "verdana","Arial"; width:90%; margin-left:auto; margin-right:auto; } 
  8. .tScroll {border: 1px #7494BF solid; background-color: #ffffff; overflow: scroll; overflow-x:hidden; height:300px; cursor: default; } 
  9. tr.tableHead { position:relative; background-color:#BFCEE7; height: 16px; text-align: center; } 
  10. th, td { font: 11px "Verdana", "Arial"; border: #7494BF solid; border-width: 0px 1px 1px 0px; } 
  11. table{width:100%; } 
  12. </style> 
  13. </head> 
  14. <body> 
  15. <div class="tScroll"> 
  16. <table cellspacing="0"> 
  17. <tr class="tableHead"> 
  18. <th>heading1***************</th> 
  19. <th>heading2</th> 
  20. <th>heading3</th> 
  21. <th>heading4*************</th> 
  22. <th>heading5</th> 
  23. <th>heading6****</th> 
  24. </tr> 
  25. <tr><td>cell1</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> 
  26. <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> 
  27. <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> 
  28. <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> 
  29. <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> 
  30. <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> 
  31. <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> 
  32. <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> 
  33. <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> 
  34. <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> 
  35. <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> 
  36. <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> 
  37. <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> 
  38. <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> 
  39. <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> 
  40. <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> 
  41. <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> 
  42. <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> 
  43. <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> 
  44. <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> 
  45. <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> 
  46. <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> 
  47. <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> 
  48. <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> 
  49. <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> 
  50. <tr><td>cell n</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr> 
  51. </table> 
  52. </div> 
  53. </body> 
  54. </html> 
andy1217
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jsp中实现带滚动条的table表格实例代码
10-21
本文将详细介绍如何在JSP（JavaServer Pages）中实现一个带有滚动条的table表格，通过实例代码来帮助理解这一功能。 首先，让我们了解基本的HTML表格结构。在HTML中，`<table>`元素用于创建表格，而`<tr>`定义表格...
CSS设置table下tbody的滚动条的实现
09-22
主要介绍了CSS设置table下tbody的滚动条的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
IE浏览器兼容tbody显示滚动条
Harvey Wang的博客
12-21 1983
  由于项目组没有前端，所以既需要写后台，也需要写前端页面。当然就需要考虑一下浏览器的兼容性，谷歌浏览器的兼容性就是好，怎么写都行。IE浏览器就要差很多了。今天介绍一下怎么解决thead不显示滚动条，tbody显示滚动条。   我做的是一个弹窗，弹窗里面显示一个表格，要求thead的标题不显示滚动条，tbody显示滚动条。查了一下资料，直接在tbody中加了一个style="max-height:...
[IE兼容性] Table 之边框
热门推荐
oscar999的专栏
12-05 1万+
table 是HTML 中常用的标签。 但是在IE 8 以下的浏览器中会出现边框丢失的状况
CSS设置滚动条样式（兼容IE）
finalfantasy
09-14 5459
1、这是在webkit浏览器下显示的样式。            （个人比较喜欢简约点的） 2、在IE浏览器下显示的样式（为了区分所以样式写的不一样，我没找到IE下设置滚动条宽高的方法） 下面是代码： [html] view plain copy div id='scroll'>  
ie统计报表html,html – 表格在IE8中滚动
weixin_39980082的博客
06-09 93
在我的项目中,我试图使IE8中的tbody滚动.我知道只要给予溢出即可滚动：auto to tbody.但这在IE8中不起作用.为了使其在IE8中工作,该tbody必须被赋予位置：absolute(或float：left to thead和tbody).如果我使溢出：自动工作,那么我分配给th和td的百分比宽度被忽略.这反过来又不让tr在thead和tbody中占据全宽.因此,tr和tbody /...
layui 实现table翻页滚动条位置保持不变的例子
10-16
然而，在实际应用中，开发者可能会遇到一些小问题，比如在使用layui table进行数据分页时，滚动条的位置在翻页后会自动复位，这会破坏用户的浏览连续性，降低使用体验。为了解决这个问题，我们可以自定义一些...
QmlTextEdit带滚动条QmlTextEditScrollBar.7z
07-20
这个`QmlTextEditScrollBar`可能是一个自定义实现，它为`QmlTextEdit`添加了滚动条功能，因为默认的`QmlTextEdit`在文本内容过多时可能不会自动显示滚动条。在Qt Quick中，滚动条通常是通过`Flickable`或`ScrollView...
解决layui数据表格table的横向滚动条显示问题
10-16
今天小编就为大家分享一篇解决layui数据表格table的横向滚动条显示问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
b050闲置图书分享-springboot+vue+elementui.zip（可运行源码+sql文件+文档）
07-23
本次开发的闲置图书分享平台实现了收货地址管理、字典管理、公告管理、留言板管理、图书管理、图书收藏管理、图书评价管理、图书订单管理、用户管理、管理员管理等功能。系统用到了关系型数据库中王者MySql作为系统的数据库，有效的对数据进行安全的存储，有效的备份，对数据可靠性方面得到了保证。并且程序也具备程序需求的所有功能，使得操作性还是安全性都大大提高，让闲置图书分享平台更能从理念走到现实，确确实实的让人们提升信息处理效率。 管理图书的数据，此页面主要实现图书的增加、修改、删除、查看的功能。公告信息管理页面提供的功能操作有：新增公告，修改公告，删除公告操作。公告类型管理页面显示所有公告类型，在此页面既可以让管理员添加新的公告信息类型，也能对已有的公告类型信息执行编辑更新，失效的公告类型信息也能让管理员快速删除。
《大学生职业生涯规划与就业指导》大一阶段课程作业
最新发布
07-24
《大学生职业生涯规划与就业指导》大一阶段课程作业
开题报告潮汕特产直销系统 已通过开题答辩的.doc
07-23
随着互联网的高速发展，人们的生活方式发生了翻天覆地的变化，在过去，人们想要购买很远地方的东西会非常麻烦，因为是通信和交通都不是十分的方便，而现在网络购物成为了人们日常生活中不可或缺的一部分。在这样的背景下，互联网与传统行业的融合已经成为了一种不可阻挡的趋势。对于中国特色的潮汕特产来说，这一趋势也带来了巨大的变革和发展机遇[1]。
Python性能优化：掌握性能分析工具的实战指南
07-23
Python是一种广泛使用的高级编程语言，由Guido van Rossum于1989年底发明，第一个公开发行版发行于1991年。Python的设计哲学强调代码的可读性和简洁的语法（尤其是使用空格缩进来区分代码块，而不是使用大括号或关键词）。这使得Python被认为是一种易于学习的语言，同时具备强大的功能，适合初学者和经验丰富的程序员。 Python的主要特点包括： 1. **易于学习**：Python有相对较少的关键字，结构简单，和一个明确定义的语法。 2. **易于阅读**：Python代码定义的清晰度使得它像可执行伪代码。 3. **易于维护**：Python的成功在于它的源代码是相当容易维护的。 4. **广泛的标准库**：Python的标凑库很庞大，包含用于互联网通信、网络通信、数据压缩、加密、系统管理等的模块。 5. **跨平台**：Python可以在多种操作系统上运行，包括但不限于Windows、Mac OS X、Linux等。 6. **解释型语言**：Python是一种解释型语言，这意味着开发过程中没有编译步骤。 7. **动态类型系统**：Python不会在编写
Android学习系列之gradle实战
07-23
Android学习系列之gradle实战
RFC 3261中文版技术文档
07-23
**标题与描述解析** 标题"RFC 3261 中文文档"指的是互联网请求评论（Request for Comments）3261的中文版本。RFC 3261是互联网工程任务组（IETF）发布的一个重要标准，它定义了SIP（Session Initiation Protocol，会话初始协议）的核心规范。SIP是一种用于建立、修改和终止多媒体通信会话的协议，广泛应用于VoIP（Voice over IP，IP语音）和统一通信系统中。 描述同样简洁明了，只强调了这是RFC 3261的中文翻译，意味着对于中文读者来说，这个文档提供了一个理解SIP协议的中文语言资源。 **标签解析** "RFC3261 中文"标签进一步确认了文档的内容，表明这是关于RFC 3261的中文资料，便于搜索和分类。 **压缩包子文件的文件名称列表** 文件名为"RFC3261 中文.mht"，这是一个单一网页文件，通常包含HTML、图像和其他资源，用于保存完整的网页内容。用户可以通过打开这个文件来查看RFC 3261的中文翻译。 **SIP协议详述** SIP协议是基于文本的，其设计类似于HTTP
嵌入式LinuxC语言程序设计基础教程第8章函数解读.doc
07-23
嵌入式
DirectShow滤镜：字幕叠加功能（含注解说明）
07-23
DirectShow Transform Filter最典型的例子，带注释，难度不大，学习必备 博客对应文章http://blog.csdn.net/leixiaohua1020/article/details/12498975。内容来源于网络分享，如有侵权请联系我删除。另外如果没有积分的同学需要下载，请私信我。
element table 兼容ie 滚动条样式
09-06
要使element table在IE浏览器上兼容滚动条样式，可以通过使用CSS代码来实现。 首先，我们需要为IE浏览器单独定义滚动条的样式。IE浏览器使用的是自己的专有样式属性，所以我们需要使用一些特殊的CSS选择器来达到目的。 针对滚动条的样式，我们可以使用一下代码片段来定义： /* 定义滚动条的宽度和高度 */ .element-table::-webkit-scrollbar { width: 10px; height: 10px; } /* 定义滚动条的背景颜色 */ .element-table::-webkit-scrollbar-track { background-color: #f1f1f1; } /* 定义滚动条滑块的样式 */ .element-table::-webkit-scrollbar-thumb { background-color: #888; border-radius: 5px; } 通过上述代码，我们首先定义了滚动条的宽度和高度，然后定义了滚动条的背景颜色，最后定义了滚动条滑块的样式，包括颜色和边框的圆角。 在以上代码中，".element-table"是指具有该类名的元素，通过这样的方式，我们可以选择性地给某个特定的表格添加滚动条样式。 希望这个回答能够解决您的问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值