jsp中为表格添加水平滚动条的实现方法
首先,本项目中使用的是bootstrap框架,因此有些人会说,给表格设置自适应属性就可以了
这里要申明的是
bootsrtap自适应是针对当浏览器不占满整个屏幕,而是一半的时候才会出现横向的滚动条
而当我们将浏览器最大化的时候,如果列数增多了呢?会出现什么效果
答案就是会出现挤压的效果,横向并不会出现滚动条
查看网上的教程,很多人都说将什么父div设置100%,table添加scrool属性均不可
这里,解决的方法很简单,设置<th>标签的属性即可,让其不要自动换行
$(document).ready(function() { $("th").css("white-space","nowrap"); });
来设置页面加载完成后th标签不允许自动换行的属性即可
注意在css中使用的是这个属性,和在th标签中使用不一样,th标签中使用方法如下
<th nowrap="nowrap">也可实现不自动换行
以上就是小编为大家带来的jsp中为表格添加水平滚动条的实现方法全部内容了,希望大家多多支持我们~
相关推荐
-
JavaScript实现垂直滚动条效果
本文实例为大家分享了js垂直滚动条的实现代码,供大家参考,具体内容如下 1.红色盒子高度计算公式: 容器的高度 / 内容的高度 * 容器的高度 2.红色方块移动一像素 ,我们的内容盒子移动多少呢? (内容盒子高度 - 大盒子高度) / (大盒子高度 - 红色盒子的高度) 计算倍数 (内容盒子高度 - 大盒子高度)/ (大盒子高度 - 红色盒子的高度) * 红色盒子移动的数值 <html> <head> <meta charset="UTF-8"&g
-
jsp中实现带滚动条的table表格实例代码
如下所示: <div style="width:700px; height:225px; overflow:auto;"> <table border="1" width="100%" cellpadding="0" cellspacing="0"> <tr> <td width="3%">0</td> <td width
-
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
当div中绑定数据,给它一个属性overflow-y: scroll,添加长度大小,使其能够出现滚动条:每次刷新的时候滚动条总是会出现在最上方,这使我很头疼,经过查阅网上资料,返现两种方法可行.如下: 第一种方案 将上一个页面的div的scrolltop距离长度记录在cookie中,然后通过js调整刷新页面时的长度记录,代码如下: js代码: <script> var _h = 0; function SetH(o) { _h = o.scrollTop SetCookie("a&q
-
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
本文实例讲述了javascript简单实现跟随滚动条漂浮的返回顶部按钮效果.分享给大家供大家参考,具体如下: 比较优秀的一款超过一屏高度才显示的,跟随滚动条漂浮的返回顶部按钮特效代码. 运行效果如下图所示: 完整实例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quo
-
js实现简易垂直滚动条
效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>垂直滚动条</title> <style type="text/css"> .con { width: 350px; height: 600px; border: 1px solid saddlebrown; position: relativ
-
JavaScript中关于iframe滚动条的去除和保留
在开发中经常遇到去掉全部的滚动条,去掉右边的滚动条且保留底下的滚动条,去掉底下的滚动条且保留右边的滚动条,大家基于js是怎么实现的呢?下面通过本文给大家介绍下JavaScript中关于iframe滚动条的去除和保留的实现方法.一起看看吧! iframe嵌入页面后,我们有时需要调整滚动条,例如,去掉全部的滚动条,去掉右边的滚动条且保留底下的滚动条,去掉底下的滚动条且保留右边的滚动条.那么我们应该怎么做呢? 一:去掉全部的滚动条 第一个方法: iframe 有一个scrolling属性,它
-
js将滚动条滚动到指定位置的简单实现方法
js将滚动条滚动到指定位置的简单实现方法 代码如下(主要是通过设置Location的hash属性): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&
-
js实现页面刷新滚动条位置不变
今天因为这个问题困扰了很久网上的例子都尝试没效果,后来发现一点原来是内容最外层没有div的原因 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SpotChkDetail.aspx.cs" Inherits="Topevery.DUM.Web.Observer.SpotChkDetail" %> <script runat="ser
-
JS实现的页面自定义滚动条效果
本文实例讲述了JS实现的页面自定义滚动条效果.分享给大家供大家参考,具体如下: 这里演示网页上用的滚动条效果,是一个自定义的滚动条代码,除了上下两个箭头以外,滚动条和一般的浏览器基本差不多,鼠标滚轮滚动,滚动条滚动.html结构很简单,mainBox是外层div,content是内容,滚动条div是js动态生成的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-web-zdy-scroll-style-codes/ 具体代码如下: <!D
-
JS实现网页上随滚动条滚动的层效果代码
本文实例讲述了JS实现网页上随滚动条滚动的层效果代码.分享给大家供大家参考,具体如下: 这款网页上随滚动条滚动层代码,拖动滚动条即可看到效果,对联广告的代码也都是基于此的,右侧的浮动层同样是可以关闭的稍微加工,便可实现一个浮动广告的代码,运行一下,先看效果吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-web-fixed-scroll-adv-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3
随机推荐
- 如何修改被表单引用的ASP页面?
- 不能查看隐藏文件的解决办法
- IIS HTTP 错误 404.17 - Not Found 解决方法
- 用PHP实现 上一篇、下一篇的代码
- curl不使用文件存取cookie php使用curl获取cookie示例
- PHP的反射类ReflectionClass、ReflectionMethod使用实例
- 编写PHP脚本使WordPress的主题支持Widget侧边栏
- 支持多浏览器(IE、Firefox、Opera)剪切板复制函数_脚本之家修正版
- python动态网页批量爬取
- javascript 导出数据到Excel(处理table中的元素)
- 模拟打印机排队打印效果
- javascript 表单规则集合对象
- 大型网吧局域网搭建的各方面注意事项第1/2页
- 详解Nginx 和 PHP 的两种部署方式的对比
- android开发教程之获取使用当前api的应用程序名称
- C#实现根据数字序号输出星期几的简单实例
- Zend Framework教程之请求对象的封装Zend_Controller_Request实例详解
- Apache, PHP在Windows 9x/NT下的安装与配置 (二)
- Go之interface的具体使用
- element ui table 增加筛选的方法示例