在jsp页面中显示表格（带斜线的表格）

最新推荐文章于 2021-03-08 09:55:57 发布
最新推荐文章于 2021-03-08 09:55:57 发布
阅读量709 收藏
点赞数
原文链接：http://www.cnblogs.com/lpzpp/p/11448179.html
版权

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/raphael/2.2.7/raphael.min.js"></script>
<title>无标题文档</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}

table {
border: 1px solid #fff;
/*去掉表格之间的空隙*/
border-collapse:collapse;
margin: 100px auto;
width:100%;
heigth:100%;
}

caption {
font-size: 20px;
font-weight: bold;
}

th,td{
border: 1px solid #ccc;
width: 80px;
font-size: 14px;
line-height: 40px;
text-align: center;
}
</style>
<body>
<form id="form1" name="form1" method="post" action="">
<div id="lineDiv" style='position:absolute;z-index:8888;'></div>
<table width="63%" border="0">
<tr>
<td colspan="7"><h1 align="center">xxxxxxx</h1></td>
</tr>
<tr>
<td id="lineTd" rowspan="2" style="border:#000000 solid 1px;width:219px;height:76px;vertical-align:top;" points="[110,79,222,42,222,79]">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;事项
<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;部门</td>
<th width="9%"><div align="center">A</div></th>
<th colspan="3"><div align="center">B</div></th>
<th colspan="2"><div align="center">C</div></th>
</tr>
<tr>
<td><div align="center">a</div></td>
<td width="11%"><div align="center">b</div></td>
<td width="13%"><div align="center">c</div></td>
<td width="11%"><div align="center">d</div></td>
<td width="11%"><div align="center">e</div></td>
<td width="15%"><div align="center">f</div></td>
</tr>
<tr>
<td><div align="center">D</div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
</tr>
<tr>
<td><div align="center">E</div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
</tr>
<tr>
<td><div align="center">F</div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
</tr>
<tr>
<td><div align="center">G</div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
</tr>
<tr>
<td><div align="center">H</div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
</tr>
<tr>
<td><div align="center">I</div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
</tr>
<tr>
<td><div align="center">J</div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
</tr>
<tr>
<td><div align="center">K</div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
</tr>
</table>
</form>
</body>
<script>
$(function() {
var paper = new Raphael("lineDiv");
//paper.path("M0,0L110,85");//坐标(0,0)(110,85)
//paper.path("M0,0L220,42");//坐标(0,0)(220,42)
paper.path("M0,0L420,120");//坐标(0,0)(440,370)
var offset = $("#lineTd").offset();//td的位置
//将画线的DIV移动到td的位置
$("#lineDiv").offset({top: offset.top, left: offset.left});
})
</script>
</html>

 

 

/**

注意：在谷歌浏览器中可以直接使用，在火狐浏览器中需要调初始位置（如下调：M-120，0，0L420,120）；在IE浏览器中调初始位置（如下调：M-120，0L420,120）

*/

转载于:https://www.cnblogs.com/lpzpp/p/11448179.html

MaGe0924
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js 实现 表格的斜线
03-31
js 实现 表格的斜线! 值得下载看看!资源免费,大家分享!!
JSP表格画斜线
qihangVIP4的博客
09-13 499
表格画斜线 缺点是：浏览器自带打印会出现格式错乱，页面展示没问题 <script type="text/javascript"> $(function () { window.onload=function(){ setTimeout( function(){ // 开始时定时器延迟加载 DOM树加载完成后再进行画斜线 change() }, 500
table画斜线
youlianying的专栏
04-12 2658
无标题文档v/:*{behavior:url(#default#VML);}   body,td,th {font-size: 10pt;}-->模拟投资试算比较分析    试算过程说明       ※ 基金的历史净值水平是包含了分红再投资的收益；       ※ 如果选择日期为非工作日，则选取下一工作日的净值进行测算；       ※ 投资净收益＝投资总收益
html表格中画斜线
热门推荐
wangmuchangqiang的专栏
06-25 1万+
New Document   function a(x,y,color) {document.write("")}      姓名课程       张三     李四     王五     数学     55     66     77     英语     99     68     71    
css如何画表格斜线
simonezhlx的专栏
12-29 2465
"ss" style="margin:0px;padding:0px;height:100px;width:100px;border:1px solid;position:relative;top:50px;left:340px;">   Co      "text/javascript">   document.body.style.margin="0px";     d
xianshi.rar_jsp 表格_jsp表格
09-20
jsp 页面显示数据库数据（表格的形式显示）
5种做法实现table表格中的斜线表头效果
12-14
table表格，这个东西大家肯定都不陌生，代码中我们时常都能碰到，那么给table加一个斜线的表头有时是很有必要的，但是到底该怎么实现这种效果呢？ 我总结了以下几种方法： 1、最最最简单的做法 直接去找公司的UI，让...
jsp页面中显示word/excel格式的文档的方法
01-20
word页面只要在jsp头设置如下指令： 代码如下:<%@page contentType=”application/msword;charset=GBK” %> excel如下： 代码如下:<%@page contentType=”application/vnd.ms-excel;charset=GBK” %> ...
JSP页面设计表格
01-17
Web界面开发的，JSP中利用HTML语言实现美观大方的表格的设计，
JSP 导出Excel表格的实例
01-08
java 后台返回一个ModelAndView 对象，然后加入这2行设置 ...也可以把这二行设置放入JSP中 在jsp代码如下： <%@ page language=java import=java.util.* pageEncoding=UTF-8%> <%@ ta
ccs制作表头有斜线的表格
09-04
使用css制作表头带有斜线分隔的表格，并基于Bootstrap 自适应
在jsp页面中显示流程图
03-01
博文链接：https://yhxiao1983.iteye.com/blog/248291
jsp页面中引用其他页面的简单方法
10-19
下面小编就为大家带来一篇jsp页面中引用其他页面的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
jsp表格导出到EXCEL优质资料.doc
11-30
jsp表格导出到EXCEL优质资料.doc
javaweb JSP页面导出和导入excel表格
02-06
这段时间闲来无事，想研究一下办公系统中的导出和导入excel表格功能，最后终于弄出来，现在给广大需要的新手朋友参考使用
java实现table斜线_css 模拟表格斜线
weixin_31991991的博客
03-08 234
用div+css模拟表格对角线*{padding:0;margin:0;}caption{font-size:14px;font-weight:bold;}table{ border-collapse:collapse;border:1px #525152 solid;width:50%;margin:0 auto;margin-top:100px;}th,td{border:1px #52515...
Html Table 表格 画斜线
海乐学习
06-22 9614
效果图 在HtmlTable表格中画斜线 分 文字和斜线 两部分实现 文字部分 <th class="row-0" style="width:150px;height:50px;" > <div class="biaotou"> <div class="biaotoutxt1">转单办事处</div> <div class="biaotoutxt2">接单办事处</div>...
jsp里table边框线_jsp页面中Table边框使用总结
weixin_39584529的博客
02-17 464
一、表格的常用属性基本属性有：width(宽度)、height(高度)、border(边框值)、cellspacing(表格的内宽，即表格与tr之间的间隔)、 cellpadding(表格内元素的间隔，即tr与tr之间的间隔)、bordercolorlight(表格的亮边框颜色)、 bordercolordark(表格的暗边框颜色)、bgcolor(表格的背景色)、background(表格的背景...
单线表格实现方法
01-13 934
在网页设计时，如果用到table,除了隐藏边框的用于实现布局的table外，往往希望能把边框显示出来，而对于显示出来的边框，又往往希望是单线的，因为双线的显得笨拙。本文总结了7种常用的实现单线表格的方法，供大家参考。当然，实现的方法很多，如果您有其它方法的话，也欢迎写出来，供大家一起学习。 1、如果简单的将table的边框设置为1，效果如下，它往往不是我们所喜欢的单线表格： c
在jsp页面中以表格的形式打印杨辉三角
最新发布
05-30
2. 在 JSP 页面中，使用以下代码片段来生成一个杨辉三角表格。 ```jsp 杨辉三角表格 int numRows = 10; // 定义杨辉三角的行数 int[][] triangle = new int[numRows][numRows]; // 定义一个二维数组来...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值