问题描述:项目需要,在做表格时有时需要把边框完全去掉;
解决方案:
方案一:http://blog.163.com/j_olo/blog/static/10710119020112302535876/(蒋东峰的博客)
.表格中边框的显示 只显示上边框 <table frame=above> 只显示下边框 <table frame=below> 只显示左、右边框 <table frame=vsides> 只显示上、下边框 <table frame=hsides> 只显示左边框 <table frame=lhs> 只显示右边框 <table frame=rhs> 不显示任何边框 <table frame=void> .表格的分隔线可以隐藏 <table border rules=cols cellspacing=0 align=left> 可以隐藏横向的分隔线 <table border rules=rows cellspacing=0 align=right>可以隐藏纵向的分隔线 <table border rules=none cellspacing=0 align=center>可以隐藏横向和纵向的分隔线 ------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY> <TABLE cellSpacing=0 cellPadding=0 width="90%" align=right border=1 rules=rows frame=hsides style="border-collapse:collapse ; " bordercolor="#000000" > <TR> <TD >sadad</TD> <TD >sad</TD> <TD>dsa</TD> <TD>asd</TD> </TR> <TR> <TD >ads</TD> <TD>asd</TD> <TD>ads</TD> <TD>asds</TD> </TR> </TABLE> </BODY> </HTML> table width=1 就已经把宽度设置为 1 了 我们面临的问题是这样的,每一个 td 边线都是 1px,table 边线也是 1px。那么当两个td相邻的时候,因为每个 td 边线都是1,所以靠进的时候边线的“宽度和”就是 1+1=2。当 td 和 table 相邻时,同样。 collapse : 相邻边被合并 相邻边被合并!以前我说的 1+1=2 就是因为 td 和td之间,td 和table 之间相邻边的问题。默认时相邻边没有合并,所以就是 1+1=2。现在我们使用 border-collapse:collapse把我们合并了,所以宽度还是 1px。也就是出现细线边框了 设置Table的细边框通常有这么几种方式: 1、设置边框的BORDER=0 、cellspacing=1,设置Table的背景色为所要的边框色,再设置所有的td背景色为白色,这样细边框就显露出来了。这个方法有些邪气,看似不太正宗,但是也能达到效果,条条大路通罗马嘛! 再来看看第二种方法: 2、设置BORDER=0 ,再通过CSS,给Table加上1px的border-top,border-left,然后再设置所有的td的border-right,border-bottom,这样也能达到所要的效果。可见CSS很是强大啊。 今天在实践过程中发现,以上两种方式生成的HTML在Word中打开则发生问题,不能达到预期效果。怎么办呢!? 下面介绍一种更为简便有效的方法: 3、设置table的CSS为{border-collapse:collapse;border:none;},再设置td的CSS为{border:solid #000 1px;},大功告成!而且Word也能认出这种设置。 第三种方法最好,我也是在导出word时,很多css失效的情况下,找到了这个解决办法!
相关推荐
TABLE { background: blue; border-collapse: separate; border-spacing: 10pt; border-top: 15px solid red; border-left: 15px solid red; border-right: 5px dashed black; border-bottom: 10px dashed blue; } ...
Table with border (带边框) Cell style (单元格样式) Column resizable (列宽拖动) Maximum table height (最大高度) Resize height and width (响应式宽高) Fixed column (固定列) Grouping table ...
表格的边框算是页面制作中最头痛的,带边线的表格在之前非常讨厌做,不过今天终于解决了这个问题,下面将示例与大家分享下
程序中为了更美观会自动去掉新table上面和下面的边框,包括frame和style的: Code if(this._oTable.border > 0){ switch (this._oTable.frame) { case "above" : case "below" : case "hsides" : this._nTable...
现在在所谓“div css”的风气下,很多人放弃了表格,其实应该让每个标签物尽其用,在表现数据的地方,我们还是应该使用table。...<table class=dir> 如何通过CSS去除表格默认样式的间距</caption> <tr> <th
表格排序及合并、表格头不动、单击表头实现表格排序、改变表格当前行的颜色、内容可滚动的table、无垂直线的table、js合并table、table构成的对话框、div提示 随鼠标移动、div对话框、带CHECK的select选项框、边打字...
// 使用伪类选择器,选择第 3n 个元素去掉边框 li:nth-child(3n){ border-right:none; } 当然,如果个数确定也不多,给需要去掉右边框的元素直接添加一个特定的 class 也就完事。或者,使用 table 虽然繁琐一点...
7.1.1 表格的基本构成——table、tr、td 119 7.1.2 表格的标题——caption 120 7.1.3 表格的表头——th 121 7.2 设置表格基本属性 123 7.2.1 表格的宽度——width 123 7.2.2 表格的高度——height...
3.12 去除字符串的前后空格 3.13 刷新时清空所有文本框 3.14 随意改变大小的文本框 3.15 文本框的自动全选 3.16 文本框滚动导航 3.17 按钮获取焦点 3.18 文本框获取焦点弹出下拉框 3.19 文本框简单的单击效果 3.20 ...
3.12 去除字符串的前后空格 3.13 刷新时清空所有文本框 3.14 随意改变大小的文本框 3.15 文本框的自动全选 3.16 文本框滚动导航 3.17 按钮获取焦点 3.18 文本框获取焦点弹出下拉框 3.19 文本框简单的单击效果 3.20 ...
- Added component for printing table;; - Added ";Columns"; property for data-bands. See last report in the demo;; - Code changed: TfrReport.OnEnterRect now called OnBeforePrint;; - ...
- TRMCrossView去掉一些BUG v.2.2(Build 2002/01/11) - 增加缩放打印功能, - TRMFormReport打印StringGrid,DBGrid等Grid时,对超宽Grid增加分页功能, - MemoView增加属性CalcValue,可以访问...
alternate_table_rows 使表格中行与行之间的背景色交替变换 print 支持三种打印页面连接,文字连接、图片连接 preloaddisplay 预先加载页面,如果你的网站下载的速度比较慢,用这个比较好。 swftext 将Drm和Flash...
alternate_table_rows 使表格中行与行之间的背景色交替变换 print 支持三种打印页面连接,文字连接、图片连接 preloaddisplay 预先加载页面,如果你的网站下载的速度比较慢,用这个比较好。 swftext 将Drm和Flash...
85 <br>0131 巧截字符串的数字 86 <br>0132 如何存储变长字符串 86 <br>0133 在进行字符串比较时忽略大小写 87 <br>0134 如何去除字符串尾空格 87 <br>0135 如何去掉字符串中所有空格 ...
01 css的文本属性与边框属性 02 css的列表属性与display属性 03 css的内外边距 04 css的内外边距补充 05 css的float属性 06 css的清除浮动 07 css的定位 08 css的margin定位 第40章 01 抽屉作业之head区域(导航条...
ShowBorders=true/false 合并边框 SkinPath="" 皮肤文件夹位置 SmileyColumns=12 图符窗列数 SmileyImages=字符数组 图符窗中图片文件名数组 SmileyPath="" 图符文件夹路径 SmileyWindowHeight 图符窗口高度 ...