border-collapse:collapse 的使用
兼容性:IE5+ 继承性:无
语法:border-collapse : separate | collapse
取值:
separate : 默认值。边框独立(标准HTML)
collapse : 相邻边被合并
说明:
设置或检索表格的行和单元格的边是合并在一起还是按照标准的HTML样式分开。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 borderCollapse 。
示例:
table { border-collapse: separate; }
应用于:
IE5.0+ currentStyle runtimeStyle style TABLE
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。也就是出现细线边框了。
相关推荐
border属性 border-collapse属性
border-collapse属性 很好的解决了纠结了很久的问题 CSS 复制代码代码如下:.table{border: 1px solid #ccc;border-collapse: collapse; width:80%;}.table th,.table td{border: 1px solid #ccc;padding: 10px;} ...
CSS border-collapse 属性
默认gridview控件会在生成的html代码中的style属性中加入border-collapse:collapse,如果想把它去掉的话
1.1.2 Border-image 继承性:无 语法: border-image : none | <image> [ <number> | ]{1,4} [ / <border-width>{1,4} ]? [ stretch | repeat | round ]{0,2} ...当table设置border-collapse为collapse无效。
.menu_iframe{position:absolute; visibility:inherit;... border-collapse:collapse; background:#ffffff; font-size:12px} .cal_table td{ border:1px #ffffff solid; } .cal_drawdate{ background:#E3EBF6;
<!..._position:;min-height:100%}#head{padding-bottom:100px;...list-style:none}body,form,#fm{position:relative}td{text-align:left}img{border:0}a{color:#00c}a:active{color:#f60}.bg{background-image:url...
BORDER-COLLAPSE: collapse; BORDER-LEFT: #ffffff 0px solid; BORDER-RIGHT: #ffffff 0px solid; BORDER-TOP: #ffffff 0px solid; FONT-SIZE: 70%; MARGIN-LEFT: 10px } .issuetable { BACKGROUND-COLOR: #...
Vue实现简易购物车案例 本文实例为大家分享了... border-collapse: collapse; border-spacing: 0; } th,td{ padding: 8px 16px; border: 1px solid #e9e9e9; text-align: center; } th{ background-color:
解决办法如下: 复制代码代码如下:table{ border-collapse: collapse;}
table { border-collapse:collapse; } body { color:#333; font:12px/20px "SimSun","宋体","Arial Narrow",HELVETICA; background:#fff; } a { color:#666; text-decoration:none; } a:visited { color:#666; }...
JS实现前端分页效果 本文实例为大家分享了JS实现前端分页效果的具体代码,供大家参考,具体内容如下 <!...} table {border-collapse:collapse;width: 100%;font-size: 14px;} th{background-color: #ddd
border-collapse:collapse; } </style> 或者: <style> .TdCs1 { border:solid windowtext 1.0pt; } .TdCs2 { border:solid windowtext 1.0pt; border-left:none; } .TdCs3 { border-top:none; ...
table{border-collapse:collapse;border-spacing:0;} /* start editing from here */ a{text-decoration:none;} .txt-rt{text-align:right;}/* text align right */ .txt-lt{text-align:left;}/* text align left */...
content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}a img {border:none;} /* container,clearfix */ .container:after, ...
<... <head> <meta charset="utf-8">...meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no...border-collapse: collapse; text-align: center; }
<STYLE>body,td,a,p,.h{font-family:arial,sans-serif}.h{font-size:20px}.h{color:#3366cc}.q{color:#00c}.ts td{padding:0}.ts{border-collapse:collapse}.lnc:link,.lnc:visited{color:#00c}.pgtab,.pgtab:hover,...
border-collapse:collapse;表格边框相邻时自动合并 clear:both;overflow: auto;<父标签> div撑起来 -moz-background-size:cover; -webkit-background-size:cover; -o-background-size:cover; background-size:...
border-collapse: collapse; /*合并表格相临边框*/ } /* 这个日历没有进行定义的内容包括: */ #calendar td{} /* 日历单元格样式 */ #calendar a{} /* 有日志的号数样式(链接样式) */ #calendar a:hover{}...
按钮样式,希望对大家有用 没有边框的输入框 *****************************************************/ .NoneInput { text-align:center; width:99%;... border-collapse:collapse; } /**//*