JSP 带竖直和水平滚动条的表格，找了好几天，还不如自己写一个。

最新推荐文章于 2024-04-27 21:55:17 发布
最新推荐文章于 2024-04-27 21:55:17 发布
阅读量2.4k 收藏 1
点赞数
文章标签： jsp myeclipse stylesheet border html div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WildJava/article/details/7898346
版权

代码如下

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
   
    <title>My JSP 'MyTable.jsp' starting page</title>
   
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">   
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="This is my page">
 <!--
 <link rel="stylesheet" type="text/css" href="styles.css">
 -->
 
 <style type="text/css">
  div{
   border: 1px #000000 solid;
  }
  td{
   text-align:center;
   width:100px;
   height:30px;
   border-right: 1px #000000 solid;
   border-bottom:1px #000000 solid;
  }
 </style>
  <script type="text/javascript">
    var otherHeight = 62;
   window.οnresize=function(){
    document.getElementById("dataField").style.height = document.body.clientHeight-otherHeight+'px';
   } 
   function setSize(){
    document.getElementById("dataField").style.height = document.body.clientHeight-otherHeight+'px';
   }
 </script>
  </head>
 
  <body οnlοad="setSize()">
    <div id="tableBox" style="width:100%;height:100%">
     <div id = "titleField"style = "width:100%;height:30px; overflow: hidden;">
      <table id = "titleTable"  style = "width:700px;position:relative;" border="0" cellpadding="0" cellspacing="0">
       <tr>
        <td>1title</td>
        <td>2title</td>
        <td>3title</td>
        <td>4title</td>
        <td>5title</td>
        <td>6title</td>
        <td>7title</td>
       </tr>
      </table>
     </div>
     <div id = "dataField" style="overflow: scroll;width:100%;height:500px;" οnscrοll="javascript:titleTable.style.posLeft=-dataField.scrollLeft">
      <table id = "dataTable" style="width:700px;"  border="0" cellpadding="0" cellspacing="0">
      <%
       for(int i = 0 ;i<20;i++){
       %>
      <tr>
         <td>1</td>
         <td>2</td>
         <td>3</td>
         <td>4</td>
         <td>5</td>
         <td>6</td>
         <td>7</td>
        </tr>  
       <%
       }
       %>
      </table>
     </div>
    </div>
  </body>
</html>
 

JSP的div是没有onscroll方法的，MyEclipse会提示错误，但是，jsp最终会转成HTML，也就是说，用户访问的是HTML，JSP div的onscroll方法是可以使用的。

 

效果如下图：

 

WildJava
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jsp竖排表格
11-02
如何读出数据库中的数据病将其显示在竖排的表格中，asp.net中提供的控件，而用jsp不好实现。将字段名显示在表格的最左列。
JSP入门之表格以及常用表单元素(总结自身编程经验以及多本教科书)
GodGump的博客
10-06 3762
表格 开始标志:<table> 结束标志: </table> table常用的属性： cellpadding 规定单元格与其内容之间的空白 cellspacing 规定单元格之间的空白 border-collapse: collapse;去掉这些空白的属性,如果不设置table标签的这些属性值为0 中间是行，每行是一个<tr></tr> 每行之间是列，每一列对应 <td> </td> <td></td> 之间的
jsp中的ul和li用法
迷总的博客
07-27 1201
jsp中的ul和li用法
jsp里table边框线_JSP好看表格边框
weixin_39541869的博客
12-20 3325
好文网为大家准备了关于JSP好看表格边框范文,好文网里面收集了五十多篇关于好JSP好看表格边框好文,希望可以帮助大家。更多关于JSP好看表格边框内容请关注好文网篇一：使用JSP做了一个简单的登录框架使用JSP做了一个简单的登录框好文网为大家准备了关于JSP表格边框颜色的文章,好文网里面收集了五十多篇关于好JSP表格边框颜色好文,希望可以帮助大家。更多关于JSP表格边框颜色内容请关注好文网。ctrl...
jsp中为表格添加水平滚动条的方法
10-21
下面小编就为大家带来一篇jsp中为表格添加水平滚动条的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
jsp中为表格添加水平滚动条的实现方法
01-08
首先，本项目中使用的是bootstrap框架，因此有些人会说，给表格设置自适应属性就可以了 这里要申明的是 bootsrtap自适应是针对当浏览器不占满整个屏幕，而是一半的时候才会出现横向的滚动条 而当我们将浏览器最大化...
jsp中实现带滚动条的table表格实例代码
10-21
下面小编就为大家带来一篇jsp中实现带滚动条的table表格实例代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Jsp页面纵向滚动条定位
冰山上的来客的博客
06-20 3960
一、各浏览器下 scrollTop的差异:       IE6/7/8/9：document.documentElement.scrollTop；       Firefox:document.documentElement.scrollTop ；       Chrome：document.body.scrollTop;       注：标准浏览器是只认识documentElement.scro...
jsp输出表格、jsp输出列表
12-27
jsp输出对象，类似表格。可用于页面输出图片列表。或是类似图片列表的页面中，如果一个list很多对象，你要将同一个字段在页面输出成一个列表的形式，就请看看吧。
html/jsp 中table标签如何添加横向滚动条
热门推荐
u012954380的博客
03-13 2万+
有时候table标签会有很多列，这样会把列的宽度压缩，变的非常不美观，也不好浏览，列入这样&lt;body&gt; &lt;table border="1" width="600px" height="120px" align="center"&gt; &lt;tr&gt; &lt;td&gt;姓名&lt;/td&gt;
Table水平滚动条
qiume的专栏
12-12 1万+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 无标题页 <!-- table th { white-sp
jsp中实现带滚动条的table表格
dha1989的博客
05-10 9582
0      0              1      2              3      4              5      6              7      8
[1688]jsp工资投放管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目
qq_251836457的博客
04-27 758
(12)支付工资申请管理：对支付工资申请信息进行添加、删除、修改和查看。(14)工资取消发放管理：对工资取消发放信息进行添加、删除、修改和查看。(8)工资申报管理：对工资申报信息进行添加、删除、修改和查看。(6)工资卡管理：对工资卡信息进行添加、删除、修改和查看。(1)权限管理：对权限信息进行添加、删除、修改和查看。(2)单位管理：对单位信息进行添加、删除、修改和查看。(3)岗位管理：对岗位信息进行添加、删除、修改和查看。(4)用户管理：对用户信息进行添加、删除、修改和查看。
[1671]jsp教材管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目
qq_251836457的博客
04-27 834
教材管理系统建设的分析，系统主要功能包括：教师管理、管理员管理、学生管理、教材类别管理、教材管理、教材领用管理、入库管理、出库管理、报损管理等功能。(7)教材领用管理：学生对教材领用信息进行添加、删除、修改和查看自己的领用信息，管理员对教材领用进行处理。(5)教材类别管理：管理对系统内的教材类别信息进行添加、删除、修改和查看，方便对系统内的教材进行归类。(6)教材管理：管理员对教材信息进行添加、删除、修改和查看。(4)公告管理：管理员对公告信息进行添加、删除、修改和查看，普通的学生和教师查看公告。
用html画一个四叶草
liulang68的博客
04-20 1735
以上是部分代码，需要请看主页加联系方式。
在html中使用数学公式latex
最新发布
bigcrab的博客
04-27 530
来自 https://katex.org/docs/autorender 可以自动渲染。
jsp里写一个好看的表格
05-26
可以使用HTML标签来实现一个好看的表格，如下所示： ... 姓名 年龄 性别 ...这段代码会生成一个带有表头和三行数据的表格。你可以通过CSS样式来美化表格的外观，如修改字体、背景色、边框等属性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值