一个IE下给表格单元格划斜线的代码

最新推荐文章于 2020-10-29 17:30:58 发布
最新推荐文章于 2020-10-29 17:30:58 发布
阅读量126 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/kdalan/archive/2012/06/08/2542036.html
版权
我们在表格中经常会有这样的需求，如果某单元格不需要数据，则将单元格对角线划一个斜线，今天项目用到，由于不需要兼容性，所以没考虑兼容性，只适应IE下，完美主义者慎入。

直接附上代码，用了jquery，如不用jquery可以适当修改下代码，IE下可用：

ExpandedBlockStart.gif View Code 
<html xmlns:v= " urn:schemas-microsoft-com:vml ">
<head><title>Line</title>
</head>
<script src= " jquery-1.4.1.js " type= " text/javascript "></script>
<STYLE>
v\:* { BEHAVIOR: url(# default#VML)}
table{background-color:# 000;}
tr{background-color:#FFF;}
td{height:25px;text-align:center;}
</STYLE>
<script language= " javascript ">
    function showLine(jqObj)
    {
         var comObj = $(jqObj)[ 0];
         var fromStr = comObj.offsetLeft+ " , "+comObj.offsetTop;
         var toStr = (comObj.offsetLeft+comObj.offsetWidth)+ " , "+(comObj.offsetTop+comObj.offsetHeight);
         var lineStr =  " <center><v:line from=' "+fromStr+ " ' id='abc' to=' "+toStr+ " ' style='position:relative;'/></center> ";
        comObj.innerHTML = lineStr;
    }
    $(document).ready(function(){
        $( " .line ").each(function(){
            showLine( this);
        });
    })
</script>
<body>

<table cellpadding= " 0 " cellspacing= " 1 " border= " 0 ">
<tr>
    <td width= " 120 "  class= " line "></td>
    <td width= " 120 ">语文</td>
    <td width= " 120 ">数学</td>
    <td width= " 120 ">英语</td>
</tr>
<tr>
    <td>小刚</td>
    <td> 50</td>
    <td  class= " line "></td>
    <td> 80</td>
</tr>
<tr>
    <td>小明</td>
    <td  class= " line "></td>
    <td> 70</td>
    <td> 99</td>
</tr>
<tr>
    <td>小红</td>
    <td> 70</td>
    <td> 80</td>
    <td  class= " line "></td>
</tr>
</table>
</body>

效果图：

转载于:https://www.cnblogs.com/kdalan/archive/2012/06/08/2542036.html

weixin_30896763
关注
采用CSS实现Html斜线表头
hcl1687的专栏
09-07 2万+
使用表格的时候，经常会用到斜线表头，如下图所示。  网上搜到的方法，通常是利用js实现斜线绘制。参考：http://qinya.iteye.com/blog/1836637 这种方式比较麻烦，要动用js，有点杀鸡用牛刀的感觉。 于是，想着通过css实现表头斜线。原理很简单，就是通过css3的background-size属性实现背景图片自适应填充。 背景图片为一个16px*16
如何用html代码做表格里的对角线,如何用用div+css模拟表格对角线
weixin_30700095的博客
06-10 1349
首先声明：这只是探讨一种CSS模拟表格对角线的用法，实际在工作中可能觉得这样做有点小题大作，这不是本主题讨论的重点。如果对此深以为然的朋友，请一笑过之。。。有时在插入文档时，要用到表格对角线，常见的作法是用图片的方式来处理，还有就是用vml来画对角线，能不能用html+css方式来实现呢？答案是肯定的，下面我们来摸拟一个表格对角线。原理：用边框线来摸拟斜线，我们知道，如果将一个DIV的边框线设置得...
jquery 表格斜线
10-14
使用jquery绘制表格斜线，表格头斜线，无需使用图片。
excel单元格斜线_含金量100%的9个Excel函数公式，全部100%掌握的都是超级高手！...
weixin_39717443的博客
10-23 780
函数公式，可以说是Excel的灵魂，其功能是非常强大的，可以说只有“想不到，没有它做不到”。但是对于小白来说，函数公式的应用就是难上加难……本文主要列举了一些常用高效率的函数公式，希望对大家有所帮助。一、从身份证号中提取出生年月。方法：在目标单元格中输入公式：=TEXT(MID(C3,7,8),"00-00-00")。解读：1、首先利用Mid函数提取C3单元中从第7位开始，长度为8...
5种做法实现table表格中的斜线表头效果
12-14
table表格，这个东西大家肯定都不陌生，代码中我们时常都能碰到，那么给table加一个斜线的表头有时是很有必要的，但是到底该怎么实现这种效果呢？ 我总结了以下几种方法： 1、最最最简单的做法 直接去找公司的UI，让她做一张图片，作为背景图片放到这里，然后撑满就可以了。是不是很简单！！！ 2、相当简单的做法 其实了解css3的朋友，一看到这个效果，脑子中瞬间出现的就是transform这个属性，是的，这个确实可以，也很简单，就是有一个问题要注意浏览器的兼容性问题，大家心里要要时刻保持着危机意识（IE还存在呢），如果你们公司的要求是只兼容chrome，那么，这个方法很适合你。 3、十分简单的做法
table画斜线
youlianying的专栏
04-12 2684
无标题文档v/:*{behavior:url(#default#VML);}   body,td,th {font-size: 10pt;}-->模拟投资试算比较分析    试算过程说明       ※ 基金的历史净值水平是包含了分红再投资的收益；       ※ 如果选择日期为非工作日，则选取下一工作日的净值进行测算；       ※ 投资净收益＝投资总收益
html table表头斜线
weixin_30483013的博客
10-08 770
关于htnl的table的表头斜线，符合表格设计规范，<style> .biaotou { line-height: 5px; text-align: left; } .biaotou { background: rgba(0, 0, 0, 0) url("${base}/images/tab_bg.jpg") no-repe...
页面中的表格如何画斜线
Lam's IT Story
10-08 382
有的时候我们在做开发的时候会想要画出有斜线的表格，方法如下： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>表格斜线</title> </head&...
CSS div斜线倾斜45度
热门推荐
看看我都干了些啥！
12-08 1万+
CSS div斜线倾斜45度   div的样式：   .line-div{ width: 12rem; height: 4rem; border-bottom: 0.15rem solid #dcdcdc; /* border: 2px solid #000000; */ position: absolute; text-align: center; margin-left...
CSS模拟表格斜线
喵喵的博客
10-29 1810
CSS模拟表格斜线 原理 利用div+css模拟表格的对角线，容器相邻边的border宽度大于1时，且相邻边框颜色不一样，会形成一个斜线，具体代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style type="text/css"> .div { border-left: #023060 20px
使用svg在表格内画斜线
前端精髓
04-11 2401
可缩放矢量图形（英语：Scalable Vector Graphics，SVG）是一种基于可扩展标记语言（XML），用于描述二维矢量图形的图形格式。 SVG由W3C制定，是一个开放标准。
html table 表头 分割斜线
专栏
09-26 2108
&lt;HTML&gt; &lt;HEAD&gt; &lt;TITLE&gt;1&lt;/TITLE&gt; &lt;META NAME="Generator" CONTENT="EditPlus"&gt; &lt;META NAME="Author" CONTENT=""&gt; &lt;META NAME
用JS和HTML实现斜线表头
祥子的博客
01-02 3629
首先下载JS图形库API:wz_jsgraphics.js 第二步：编写html文件：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head>
在表格中加入斜线(html页面设计)
bucce的专栏
03-29 9669
<br /><!--<!DOCTYPE   HTML   PUBLIC   "-//W3C//DTD   HTML   4.0   Transitional//EN">   --><br /><HTML><br /><HEAD><br /><TITLE> <table>单元格中划斜线 </TITLE><br /><META NAME="Generator" CONTENT="EditPlus"><br /><META NAME="Author" CONTENT=""><br /><META NAME="Ke
luckysheet 单元格 画斜线
最新发布
08-07
在Luckysheet（幸运表格）这样的在线电子表格软件中，如果你想要在单元格内绘制斜线，通常操作流程是这样的： 1. **选择单元格**：首先选中你要添加斜线的单元格。 2. **插入特殊字符**：Luckysheet可能会提供特殊...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值