`
chenssy
  • 浏览: 61772 次
  • 性别: Icon_minigender_1
  • 来自: 岳阳
社区版块
存档分类
最新评论

CSS如何修改tr边框属性

 
阅读更多


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>

分享到:
评论

相关推荐

    CSS如何修改tr边框属性实例详解

    如果我们按照如下的形式修改tr的属性就大错特错了. 复制代码代码如下: tr{ border:1px solid #DDDDDD; } 这样是没有任何效果的。因为表格中的tr并非单一的边框,这样便需要属性border-collapse,border-collapse ...

    使用HTML开发商业网站-CSS控制表格边框课件.pptx

    除了表格标签自带的属性外,还可用CSS的边框、宽高、颜色等来控制表格样式。此外,CSS中还提供了表格专用属性,以便控制表格样式。 本节将从边框、边距和宽高三个方面,详细讲解CSS控制表格样式的具体方法。 CSS控制...

    css 解决表格边框不显示的问题

    下面有一个例子,看如下...复制代码代码如下: ”1″ width=”100%” id=”table1″&gt; &lt;tr&gt; &lt;td&gt; &lt;/td&gt; &lt;td&gt; &lt;/td&gt; &lt;td&gt; &lt;/td&gt; &lt;td&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; &lt;/td&gt; &lt;td&gt; &lt;/td&gt; &lt;td&gt; &lt;/td&gt; &lt;td&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;

    html设置虚线边框的方法

    border为边框属性,如果要实现对象边框效果,要设置边框宽度、边框颜色、边框样式(实线还是虚线) border:1px dashed #F00 这个就是设置边框样式宽度为1px,虚线,虚线为红色。 4、实例描述 我们对以上几个标签设置...

    使用HTML开发商业网站-CSS控制单元格边距课件.pptx

    除了表格标签自带的属性外,还可用CSS的边框、宽高、颜色等来控制表格样式。此外,CSS中还提供了表格专用属性,以便控制表格样式。 本节将从边框、边距和宽高三个方面,详细讲解CSS控制表格样式的具体方法。 CSS控制...

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

    border-collapse属性 很好的解决了纠结了很久的问题 CSS 复制代码代码如下:.table{border: 1px solid #ccc;border-collapse: collapse; width:80%;}.table th,.table td{border: 1px solid #ccc;padding: 10px;} ...

    CSS实现表格细边框的两种方法

    在网页制作中,细边框这个制作方法是必不可少的。这里介绍2种常见的表格细边框制作方法,均通过XHTML验证。 复制代码代码如下: &lt;!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...

    CSS3网页知识.doc

    HTML5基础CSS3基础 Table 属性 cellspacing 格子之间的距离 Cellpadding 格子和内容之间的距离 Align 左右位置 left center right Valign 上下位置 Border 边框值 无单位 Bgcolor 背景色 Tr 行 Td 列

    css入门笔记

    1.css的概述 1.问题 HTML属性修饰有一定局限,是不太便捷 2.css的语法规范 1.使用css样式方式 1.内联样式 行内样式 特点:将css样式定义在HTML标记中 语法: 样式声明:用样式属性和值组成(属性:值;) ...

    js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)

    本文实例讲述了js+css实现的圆角边框TAB选项卡滑动门效果。实例包含两款CSS圆角代码,可鼠标点击,也可鼠标移动上去显示效果,分享给大家供大家参考。具体如下: 运行效果图:——————-查看效果——————- ...

    css 细线表格 css制作table细线表格常用属性

    Css制作table细线表格 1、介绍了一个不常用属性:border-collapse:collapse; 2、使用了一个属性缩写技巧:border:style color;border-width:上 右 下 左; &lt;!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 ...

    CSS边距属性定义是用margin还是用padding的两者对比

    ——CSS权威指南 padding称呼为内边距,其判断的依据即边框离内容正文的距离,而我喜欢CSS权威指南解释的“补白”(或者叫“留白”),因为他很形象。补白(padding):补白位于元素框的边界与内容区之间。很自然,...

    使用 css3 transform 属性来变换背景图的方法

    使用 css3 transform 属性可以轻易的旋转,倾斜,缩放任何元素。目前即使没有任何前缀也可以在绝大部分浏览器上很好的使用。 #myelement { -webkit-transform: rotate(30deg); transform: rotate(30deg); } 这个听...

    css笔记课程笔记2019,5,22

    ** 使用标签把要操作的数据包起来,通过修改标签的属性值来实现标签内数据样式的变化 *** &lt;font size="5"&gt;&lt;/font&gt; 2、图像标签 图片的路径"/&gt; ** 通过html访问本地图片,使用绝对路径,目前有问题 3、...

    输入框点击时边框变色效果的实现方法

    DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&gt; &lt;html xmlns=http://www.w3.org/1999/xhtml&gt; &lt;head&gt; &lt;meta ...

    CSS控制背景图像平铺实现边框阴影效果

    一款用CSS控制背景图像平铺,从而实现区域边框阴影的效果,虽然用到了图片,但可贵之处是本代码不管你需要阴影的区域是多大,它都能自动适应,因些还是很值得收藏一下的,兼容所有的IE浏览器。 复制代码代码如下: &...

    实现CSS3中的border-radius(边框圆角)示例代码

    实现边框圆角 -moz-border-radius: 32px; -webkit-border-radius: 32px; border-radius: 32px; behavior: url(border-radius.htc); 复制代码代码如下: &lt;!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//...

    给表格设置不重叠的边框(单线边框)的2种方法

    下面我给大家介绍两种设置单线边框的css样式: 第一种: 复制代码代码如下: table{ border-collapse:collapse; } table tr{ border:1px solid red; } 第二种: 复制代码代码如下: table tr td{ border-top:1px ...

    CSS3中文字镂空、透明值、阴影效果设置示例小结

    text-fill-color打造镂空文字:代码 CSS Code复制内容到剪贴板 -webkit-text-fill-color:transparent; -webkit-text-stroke:1px #000;  效果 text-stroke-color透明值让文字更柔和... -webkit-text-fill-color:tr

Global site tag (gtag.js) - Google Analytics