同时用样式表为 table、td 指定了边框后,可能会发生重叠,这取决于 border-collapse。
<table>
<tr>
<td>
<table style="border:1px solid red;">
<tr>
<td style="border:1px solid blue;"> </td>
<td style="border:1px solid blue;"> </td>
<td style="border:1px solid blue;"> </td>
<td style="border:1px solid blue;"> </td>
</tr>
</table>
</td>
<td>
<table style="border:1px solid red;border-collapse:collapse;">
<tr>
<td style="border:1px solid blue;"> </td>
<td style="border:1px solid blue;"> </td>
<td style="border:1px solid blue;"> </td>
<td style="border:1px solid blue;"> </td>
</tr>
</table>
</td>
</tr>
</table>
FF 结果如下:
- 左边是未指定 border-collapse 的(默认为 separate)。
- 右边是指定了 border-collapse 为 collapse 的。
IE 结果如下:
- 左边是未指定 border-collapse 的(默认为 separate)。
- 右边是指定了 border-collapse 为 collapse 的。
兼容性
可以看出在发生重叠时,Firefox 是用 td 覆盖 table 的,而 IE 是用 table 覆盖 td 的。
=======================================================================
<table border="1" bordercolor="#FF9966" >
<tr>
<td width="102" style="border-right-style:none">隐藏右边框</td>
<td width="119" style="border-left-style:none">隐藏左边框</td>
</tr>
<tr>
<td style="border-top-style:none">隐藏上边框</td>
<td style="border-bottom-style:none">隐藏下边框</td>
</tr>
</table>
<table>
<tr>
<td style="border-right:#cccccc solid 1px;">显示右边框</td>
<td style="border-left:#cccccc solid 1px;">显示左边框</td>
<td style="border-top:#cccccc solid 1px;">显示上边框</td>
<td style="border-bottom:#cccccc solid 1px;">显示下边框</td>
</tr>
</table>
<table>
<tr>
<td style="border-right : thin dashed blue;">右边框显示细虚线</td>
<td style="border-bottom: thick dashed yellow;">左边框显示粗虚线</td>
<td style="border-top: double green;">上边框显示两条线</td>
<td style="border-left: dotted red;">下边框显示点</td>
</tr>
</table>
分享到:
相关推荐
当显示的table宽度受限制固定宽度时,表格的展示列又很多的时候,如何更好地处理并展示,可下载资源查看,可拖动表格,表格可左右拖动,表格td边框可以左右拖动,表格里的内容可以很好的显示。
NULL 博文链接:https://zhouchaofei2010.iteye.com/blog/1772027
//显示右边框为1px,如果不想显示就为0px BORDER-TOP: #f9f9f9 0px solid; //显示上边框为1px,如果不想显示就为0px BORDER-LEFT: #f9f9f9 0px solid;//显示左边框为1px,如果不想显示就为0px BORDER-BOTTOM: #f5f5...
td 无边框处理技巧
Html_的table_边框设置
">显示右边框</td> <td style="border-left:#cccccc solid 1px;">显示左边框</td> <td style="border-top:#cccccc solid 1px;">显示上边框</td> <td style="border-bottom:#cccccc solid 1px;">显示下边框</td>
原因倒也不复杂:因为在 IE 下( Firefox 似乎和 IE 一致)如果某个 td 的内容为空的话,即便你设置了高度和宽度,这个 cell 的边框样式也是不会被显示出来的; Opera 则不管是否有内容与否,一概应用样式来渲染。这...
这样: <td> </td> 2、直接在table里这样写:<table border=0 cellspacing=0 xss=removed> 看清了啊,border-collapse只能是collapse,虽然border-collapse还有separate,inherit属性。用这 种方法可以把边框显示...
TD测试报告,TD7.6软件测试报告 Table of Contents Table of Contents 2 Chapter 1 Requirements 4 1.1 功能需求 (ReqID 2 ) 4 1.1.1 文件 (ReqID 5 ) 4 1.1.1.1 新建 (ReqID 14 ) 4 1.1.1.2 打开 (ReqID 16 ) 4 1.1...
td,th{ border:1px solid #F00; } /*为单元格单独设置边框*/ CSS控制表格样式 学习CSS控制表格边框时需要注意以下几点: border-collapse属性的属性值除了collapse(合并)之外,还可以为separate(分离),默认为...
table tr td 2、实例用到CSS属性单词 border width height 3、实现虚线的CSS重点介绍 border为边框属性,如果要实现对象边框效果,要设置边框宽度、边框颜色、边框样式(实线还是虚线) border:1px dashed #F00 这个...
本文实例讲述了JS动态改变表格边框宽度的方法。分享给大家供大家参考。具体如下: 下面的JS代码通过表格对象的border属性修改表格边框宽度 <!DOCTYPE html> <html> <head> [removed] function ...
我想问一个在dreamweaver中,我弄了一个登陆的表格,...<td> </td> <td> </td> <td> </td> 那个style就是只有外边框,如果直接border就是表格的所有边框。 border-style:solid; border-color:Lime; (颜色)
默认情况下,表格的边框为0,我们可以为表格设置边框线。 基本语法 语法解释 通过BORDER属性定义边框线的宽度,单位为像素。 文件范例:10-2.htm 设定边框线的宽度。01 <!– —————————— –>02 <!–...
<TD Bordercolorlight=color_VALUE> 语法解释 定义颜色的时候,可以使用英文颜色名称或十六进制颜色值表现。 文件范例:10-27.htm 设定单元格亮边框的颜色。01 <!– —————————— –>02 <!– 文件范例...
下面有一个例子,看如下...复制代码代码如下: ”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>
基本属性有:width(宽度)、height(高度)、border(边框值)、cellspacing(表格的内宽,即表格与tr之间的间隔)、 cellpadding(表格内元素的间隔,即tr与tr之间的间隔)、bordercolorlight(表格的亮边框颜色)...
大多数朋友都会遇到给表格table设置边框的情况,但效果总是达不到预期,比如某几根线会...复制代码代码如下: table tr td{ border-top:1px solid red; } table{ border:1px solid red; border-top-width:0px; } 效果: