tr是html标签中行的标记,在web开发中,有时候我们为了美观需要修改行的属性。比如tr的边框。如果我们按照如下的形式修改tr的属性就大错特错了.
tr{
border:1px solid #DDDDDD;
}
这样是没有任何效果的。因为表格中的tr并非单一的边框,这样便需要属性border-collapse,border-collapse 属性设置表格的边框是否被合并为一个单一的边框,还是象在标准的 HTML 中那样分开显示。
实例:为表格设置合并边框模型:
table{
border-collapse:collapse;
}
参数:
separate 默认值。边框会被分开。不会忽略border-spacing 和 empty-cells 属性。
collapse<wbr><wbr> 如果可能,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。</wbr></wbr>
inherit<wbr><wbr><wbr><wbr><wbr> 规定应该从父元素继承border-collapse 属性的值。</wbr></wbr></wbr></wbr></wbr>
分享到:
相关推荐
如果我们按照如下的形式修改tr的属性就大错特错了. 复制代码代码如下: tr{ border:1px solid #DDDDDD; } 这样是没有任何效果的。因为表格中的tr并非单一的边框,这样便需要属性border-collapse,border-collapse ...
除了表格标签自带的属性外,还可用CSS的边框、宽高、颜色等来控制表格样式。此外,CSS中还提供了表格专用属性,以便控制表格样式。 本节将从边框、边距和宽高三个方面,详细讲解CSS控制表格样式的具体方法。 CSS控制...
下面有一个例子,看如下...复制代码代码如下: ”1″ width=”100%” id=”table1″> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table>
border为边框属性,如果要实现对象边框效果,要设置边框宽度、边框颜色、边框样式(实线还是虚线) border:1px dashed #F00 这个就是设置边框样式宽度为1px,虚线,虚线为红色。 4、实例描述 我们对以上几个标签设置...
除了表格标签自带的属性外,还可用CSS的边框、宽高、颜色等来控制表格样式。此外,CSS中还提供了表格专用属性,以便控制表格样式。 本节将从边框、边距和宽高三个方面,详细讲解CSS控制表格样式的具体方法。 CSS控制...
border-collapse属性 很好的解决了纠结了很久的问题 CSS 复制代码代码如下:.table{border: 1px solid #ccc;border-collapse: collapse; width:80%;}.table th,.table td{border: 1px solid #ccc;padding: 10px;} ...
在网页制作中,细边框这个制作方法是必不可少的。这里介绍2种常见的表格细边框制作方法,均通过XHTML验证。 复制代码代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...
HTML5基础CSS3基础 Table 属性 cellspacing 格子之间的距离 Cellpadding 格子和内容之间的距离 Align 左右位置 left center right Valign 上下位置 Border 边框值 无单位 Bgcolor 背景色 Tr 行 Td 列
1.css的概述 1.问题 HTML属性修饰有一定局限,是不太便捷 2.css的语法规范 1.使用css样式方式 1.内联样式 行内样式 特点:将css样式定义在HTML标记中 语法: 样式声明:用样式属性和值组成(属性:值;) ...
本文实例讲述了js+css实现的圆角边框TAB选项卡滑动门效果。实例包含两款CSS圆角代码,可鼠标点击,也可鼠标移动上去显示效果,分享给大家供大家参考。具体如下: 运行效果图:——————-查看效果——————- ...
Css制作table细线表格 1、介绍了一个不常用属性:border-collapse:collapse; 2、使用了一个属性缩写技巧:border:style color;border-width:上 右 下 左; <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 ...
——CSS权威指南 padding称呼为内边距,其判断的依据即边框离内容正文的距离,而我喜欢CSS权威指南解释的“补白”(或者叫“留白”),因为他很形象。补白(padding):补白位于元素框的边界与内容区之间。很自然,...
使用 css3 transform 属性可以轻易的旋转,倾斜,缩放任何元素。目前即使没有任何前缀也可以在绝大部分浏览器上很好的使用。 #myelement { -webkit-transform: rotate(30deg); transform: rotate(30deg); } 这个听...
** 使用标签把要操作的数据包起来,通过修改标签的属性值来实现标签内数据样式的变化 *** <font size="5"></font> 2、图像标签 图片的路径"/> ** 通过html访问本地图片,使用绝对路径,目前有问题 3、...
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 ...
一款用CSS控制背景图像平铺,从而实现区域边框阴影的效果,虽然用到了图片,但可贵之处是本代码不管你需要阴影的区域是多大,它都能自动适应,因些还是很值得收藏一下的,兼容所有的IE浏览器。 复制代码代码如下: &...
实现边框圆角 -moz-border-radius: 32px; -webkit-border-radius: 32px; border-radius: 32px; behavior: url(border-radius.htc); 复制代码代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//...
下面我给大家介绍两种设置单线边框的css样式: 第一种: 复制代码代码如下: table{ border-collapse:collapse; } table tr{ border:1px solid red; } 第二种: 复制代码代码如下: table tr td{ border-top:1px ...
text-fill-color打造镂空文字:代码 CSS Code复制内容到剪贴板 -webkit-text-fill-color:transparent; -webkit-text-stroke:1px #000; 效果 text-stroke-color透明值让文字更柔和... -webkit-text-fill-color:tr