`
wyzxzws
  • 浏览: 378794 次
  • 性别: Icon_minigender_1
  • 来自: dazhou
社区版块
存档分类
最新评论

table 边框完全去掉

css 
阅读更多

问题描述:项目需要,在做表格时有时需要把边框完全去掉;

解决方案:

    方案一: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失效的情况下,找到了这个解决办法!

 

分享到:
评论

相关推荐

    用CSS样式描述表格Table边框

    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; } ...

    vxe-table vue表格解决方案-其他

    Table with border (带边框) Cell style (单元格样式) Column resizable (列宽拖动) Maximum table height (最大高度) Resize height and width (响应式宽高) Fixed column (固定列) Grouping table ...

    一个属性border-collapse解决Table的边框问题

    表格的边框算是页面制作中最头痛的,带边线的表格在之前非常讨厌做,不过今天终于解决了这个问题,下面将示例与大家分享下

    JavaScript Table行定位效果

    程序中为了更美观会自动去掉新table上面和下面的边框,包括frame和style的: Code if(this._oTable.border &gt; 0){ switch (this._oTable.frame) { case "above" : case "below" : case "hsides" : this._nTable...

    CSS去除表格的默认间距并且制作1px的细线表

    现在在所谓“div css”的风气下,很多人放弃了表格,其实应该让每个标签物尽其用,在表现数据的地方,我们还是应该使用table。...&lt;table class=dir&gt; 如何通过CSS去除表格默认样式的间距&lt;/caption&gt; &lt;tr&gt; &lt;th

    HTML页面_js特效

    表格排序及合并、表格头不动、单击表头实现表格排序、改变表格当前行的颜色、内容可滚动的table、无垂直线的table、js合并table、table构成的对话框、div提示 随鼠标移动、div对话框、带CHECK的select选项框、边打字...

    CSS边界线消失的问题详解

    // 使用伪类选择器,选择第 3n 个元素去掉边框 li:nth-child(3n){  border-right:none;  } 当然,如果个数确定也不多,给需要去掉右边框的元素直接添加一个特定的 class 也就完事。或者,使用 table 虽然繁琐一点...

    从入门到精通HTML5——PDF——网盘链接

     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...

    《程序天下:JavaScript实例自学手册》光盘源码

    3.12 去除字符串的前后空格 3.13 刷新时清空所有文本框 3.14 随意改变大小的文本框 3.15 文本框的自动全选 3.16 文本框滚动导航 3.17 按钮获取焦点 3.18 文本框获取焦点弹出下拉框 3.19 文本框简单的单击效果 3.20 ...

    程序天下:JavaScript实例自学手册

    3.12 去除字符串的前后空格 3.13 刷新时清空所有文本框 3.14 随意改变大小的文本框 3.15 文本框的自动全选 3.16 文本框滚动导航 3.17 按钮获取焦点 3.18 文本框获取焦点弹出下拉框 3.19 文本框简单的单击效果 3.20 ...

    Report machine 2.4

    - Added component for printing table;; - Added &quot;;Columns&quot;; property for data-bands. See last report in the demo;; - Code changed: TfrReport.OnEnterRect now called OnBeforePrint;; - ...

    rm2.6正式版本

    - TRMCrossView去掉一些BUG v.2.2(Build 2002/01/11) - 增加缩放打印功能, - TRMFormReport打印StringGrid,DBGrid等Grid时,对超宽Grid增加分页功能, - MemoView增加属性CalcValue,可以访问...

    70款经典Dreamweaver插件

    alternate_table_rows 使表格中行与行之间的背景色交替变换 print 支持三种打印页面连接,文字连接、图片连接 preloaddisplay 预先加载页面,如果你的网站下载的速度比较慢,用这个比较好。 swftext 将Drm和Flash...

    Dreamweaver 插件集

    alternate_table_rows 使表格中行与行之间的背景色交替变换 print 支持三种打印页面连接,文字连接、图片连接 preloaddisplay 预先加载页面,如果你的网站下载的速度比较慢,用这个比较好。 swftext 将Drm和Flash...

    C#编程经验技巧宝典

    85 &lt;br&gt;0131 巧截字符串的数字 86 &lt;br&gt;0132 如何存储变长字符串 86 &lt;br&gt;0133 在进行字符串比较时忽略大小写 87 &lt;br&gt;0134 如何去除字符串尾空格 87 &lt;br&gt;0135 如何去掉字符串中所有空格 ...

    python入门到高级全栈工程师培训 第3期 附课件代码

    01 css的文本属性与边框属性 02 css的列表属性与display属性 03 css的内外边距 04 css的内外边距补充 05 css的float属性 06 css的清除浮动 07 css的定位 08 css的margin定位 第40章 01 抽屉作业之head区域(导航条...

    fckedit编辑器

    ShowBorders=true/false 合并边框 SkinPath="" 皮肤文件夹位置 SmileyColumns=12 图符窗列数 SmileyImages=字符数组 图符窗中图片文件名数组 SmileyPath="" 图符文件夹路径 SmileyWindowHeight 图符窗口高度 ...

Global site tag (gtag.js) - Google Analytics