jsp中为表格添加水平滚动条的方法

首先，本项目中使用的是bootstrap框架，因此有些人会说，给表格设置自适应属性就可以了

这里要申明的是

bootsrtap自适应是针对当浏览器不占满整个屏幕，而是一半的时候才会出现横向的滚动条

而当我们将浏览器最大化的时候，如果列数增多了呢?会出现什么效果

答案就是会出现挤压的效果，横向并不会出现滚动条

查看网上的教程，很多人都说将什么父div设置100%，table添加scrool属性均不可

这里，解决的方法很简单，设置<th>标签的属性即可，让其不要自动换行

$(document).ready(function() {

    $("th").css("white-space","nowrap");
});

来设置页面加载完成后th标签不允许自动换行的属性即可

注意在css中使用的是这个属性，和在th标签中使用不一样，th标签中使用方法如下

<th nowrap="nowrap">也可实现不自动换行

以上就是小编为大家带来的jsp中为表格添加水平滚动条的方法的全部内容了，希望对大家有所帮助，多多支持我们~

赞 (0)

相关推荐

  • 原生JS绑定滑轮滚动事件兼容常见浏览器

    滑轮滚动页面的事件在网页特效中进场遇到,但是在不同浏览器下的实现方式又不同.下面我实现的方法,兼容常见浏览器. function getData(event){ var e = event || window.event; //获取滚动距离(FF每次滚动 data为3或者-3,其他为120或者-120) var data = e.detail || e.wheelDelta; alert(data); } //IE之外的绑定事件方法 if(document.addEventListener &&a

  • JS实现拖动滚动条评分的效果代码分享

    小编教你JS特效拖动滚动条可以评分效果,小编感觉挺不错,用时候可能需要ASP/PHP或其它语言配合取值并写入数据库,这是前台的实现. 直接上代码 看看JS的神奇吧! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head>

  • 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鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)

    复制代码 代码如下: /** Event handler for mouse wheel event.          *鼠标滚动事件          */          var wheel = function(event) {              var delta = 0;              if (!event) /* For IE. */                  event = window.event;              if (event.w

  • jsp中为表格添加水平滚动条的实现方法

    首先,本项目中使用的是bootstrap框架,因此有些人会说,给表格设置自适应属性就可以了 这里要申明的是 bootsrtap自适应是针对当浏览器不占满整个屏幕,而是一半的时候才会出现横向的滚动条 而当我们将浏览器最大化的时候,如果列数增多了呢?会出现什么效果 答案就是会出现挤压的效果,横向并不会出现滚动条 查看网上的教程,很多人都说将什么父div设置100%,table添加scrool属性均不可 这里,解决的方法很简单,设置<th>标签的属性即可,让其不要自动换行 $(document).r

  • js网页滚动条滚动事件实例分析

    本文实例讲述了js网页滚动条滚动事件用法.分享给大家供大家参考.具体分析如下: 在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll.当onscroll事件发生时,用js获得页面的scrollTop值,判断scrollTop为一个设定值时,显示"返回面部" js网页滚动条滚动事件 <style type="text/css"> #top_div{ position:fixed; bottom:80px; rig

  • JS 滚动事件window.onscroll与position：fixed写兼容IE6的回到顶部组件

    JS 滚动事件window.onscroll与position：fixed写兼容IE6的回到顶部组件

    现在网上的回到顶部组件,懂不懂就一大段让人看不懂javascript代码,还各种不兼容.起始这个组件,完全可以自己利用javascript的滚动事件window.onscroll与position:fixed手写.IE6的兼容性问题主要出现在position:fixed上面,如何解决已经在<[CSS]IE6中的position:fixed问题与随滚动条滚动的效果>(点击打开链接)介绍过了. 下面具体说说如何利用JavaScript中的滚动事件window.onscroll实现这个回到顶部组件.

  • js监听滚动条滚动事件使得某个标签内容始终位于同一位置

    小知识点,废话不多说,直接上代码 css: 复制代码 代码如下: <pre name="code" class="css"><style> #anchor:{ position:absulate; top:40%; left:40%; width:100px; height:100px; background-color:red; } </style></pre><br> js: 复制代码 代码如下: &l

  • jsp中为表格添加水平滚动条的方法

    首先,本项目中使用的是bootstrap框架,因此有些人会说,给表格设置自适应属性就可以了 这里要申明的是 bootsrtap自适应是针对当浏览器不占满整个屏幕,而是一半的时候才会出现横向的滚动条 而当我们将浏览器最大化的时候,如果列数增多了呢?会出现什么效果 答案就是会出现挤压的效果,横向并不会出现滚动条 查看网上的教程,很多人都说将什么父div设置100%,table添加scrool属性均不可 这里,解决的方法很简单,设置<th>标签的属性即可,让其不要自动换行 $(document).r

  • C#中GridView动态添加列的实现方法

    本文实例讲述了C#中GridView动态添加列的实现方法.分享给大家供大家参考.具体如下: protected void Page_Load(object sender, EventArgs e) { TemplateField mycustomField = new TemplateField(); //创建列实例 mycustomField.ShowHeader = true; // 设置属性 LinkButton lb = new LinkButton(); lb.Text = "Dele

  • JSP中图片的上传与显示方法实例详解

    本文实例讲述了JSP中图片的上传与显示方法.分享给大家供大家参考.具体如下: 1.引言 数据库应用程序,特别是基于WEB的数据库应用程序,常会涉及到图片信息的存储和显示.通常我们使用的方法是将所要显示的图片存在特定的目录下,在数据库中保存相应的图片的名称,在JSP中建立相应的数据源,利用数据库访问技术处理图片信息.但是,如果我们想动态的显示图片,上述方法就不能满足需要了.我们必须把图片存入数据库,然后通过编程动态地显示我们需要的图片.实际操作中,可以利用JSP的编程模式来实现图片的数据库存储和显

  • angularJs 表格添加删除修改查询方法

    如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="agl/angular.min.js"></script> <script> var app=angular.module("

  • jsp中使用jstl导入html乱码问题解决方法

    在jsp中通过jst的<c:import>导入html时会出现乱码的现象,其原因是org.apache.taglibs.standard.tag.common.core.ImportSupport 的charEncoding的值为空则会出现charEncoding为默认值也就是ISO-8859-1 所幸的是charEncoding可以直接通过<c:import>直接设置,所以只需设置一下就好了,许多人说可以通过在html中通过meta设置contentType,但我试验过却不行,也

  • iOS开发中使用cocos2d添加触摸事件的方法

    CCLayer类是用来接收触摸输入的.不过你要首先启用这个功能才可以使用它.你通过设置isTouchEnabled为YES来让层接收触摸事件: 复制代码 代码如下: self.isTouchEnabled = YES; 此项设定最好在init方法中设置.你可以在任何时间将其设置为NO或者YES. 一旦启用isTouchEnabled属性,许多与接收触摸输入相关的方法将会开始被调用.这些事件包括:当新的触摸开始的时候,当手指在触摸屏上移动的时候,还有在用户手指离开屏幕以后.很少会发生触摸事件被取消

  • 详解WordPress中给链接添加查询字符串的方法

    详解WordPress中给链接添加查询字符串的方法

    查询字符串指的是链接中后边的问号后的查询语句,格式为 key=value,多个查询语句用 & 符号分开.add_query_arg() 函数就是 WordPress 提供的一个方便的函数,可以帮你给一个链接添加一个或者多个查询语句. 有人会问,添加查询字符串直接在链接后边手动追加不就可以了吗?这样有时候可行,但链接如果本身就有查询字符串就会造成格式错误的问题,而且也不利于 PHP 编写管理,而 add_query_arg() 函数帮你把一切都想好了,你只需要给出要添加查询字符串的链接和一个或多个

  • jsp中URL传递中文参数的处理方法

    在页面的url中使用encodeURI(encodeURI(中文)),对中文进行编码,并在服务器的java程序中使用URLDecoder.decode(中文, "UTF-8")进行解码即可; 如果url中需要传递+.#.?等特殊符号,可以使用encodeURIComponent(encodeURIComponent(中文)),服务器解码方法跟encodeURI的解码相同.

  • 浅谈jsp中的9个隐含对象

    在JSP中一共有9个隐含对象,这个9个对象我可以在JSP中直接使用. 因为在service方法已经对这个九个隐含对象进行声明及赋值,所以可以在JSP中直接使用. - pageContext 类型:PageContext 代表:当前页面的上下文 作用:可以获取到页面中的其他隐含对象,同时它还是一个域对象. - request 类型:HttpServletRequest 代表:请求 作用:可以获取用户发送的请求信息,它也是一个域对象. - session 类型:HttpSession 代表:当前会话

随机推荐