同时用样式表为 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边框可以左右拖动,表格里的内容可以很好的显示。
Html_的table_边框设置
主要介绍了让Table的TD有边框而Table右左没有边框的CSS样式,需要的朋友可以参考下
一、总体思路: 1、表格无边框,背景颜色设置一种颜色(#DCDFE6),这样表格的边框的... table td { background:#FFFFF; } // HTML <table border=0 cellspacing=1 cellpadding=0> <td colspan=3><el-chec
只显示上边框 <table frame=above> 只显示下边框 <table frame=below> 只显示左、右边框 <table frame=vsides> 只显示上、下边框 <table frame=hsides> 只显示左边框 <table frame=lhs> 只显示右边框 <table frame=...
The computed value of the position property of A is static and the ancestor is one of the following HTML elements: td, th, or table. 4,Return null. 这里主要有四点: 1,如果是根元素、body元素或元素的...
效果图: 实现方法: 复制代码代码如下: <!DOCTYPE html> <html>... } table td { border-top: 0; border-right: 1px solid #999; border-bottom: 1px solid #999; border-left: 0; } ta
table tr td 2、实例用到CSS属性单词 border width height 3、实现虚线的CSS重点介绍 border为边框属性,如果要实现对象边框效果,要设置边框宽度、边框颜色、边框样式(实线还是虚线) border:1px dashed #F00 这个...
大多数朋友都会遇到给表格table设置边框的情况,但效果总是达不到预期,比如某几根线会因重复设置而加粗,破坏了整体效果。下面我给大家介绍两种设置单线边框的css样式: 第一种: 复制代码代码如下: table{ border...
">显示右边框</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>
基本属性有:width(宽度)、height(高度)、border(边框值)、cellspacing(表格的内宽,即表格与tr之间的间隔)、 cellpadding(表格内元素的间隔,即tr与tr之间的间隔)、bordercolorlight(表格的亮边框颜色)...
默认情况下,表格的边框为0,我们可以为表格设置边框线。 基本语法 <TABLE BORDER=VALUE> 语法解释 通过BORDER属性定义边框线的宽度,单位为像素。 文件范例:10-2.htm 设定边框线的宽度。01 <!– ——————...
页面制作中最头痛的,表格的边框算是其一了,很讨厌做带...}.table th,.table td{border: 1px solid #ccc;padding: 10px;} Html 复制代码代码如下: <table class=”table”> <thead> <tr> <th>id</th> 作者</th> 书名
这样: <td> </td> 2、直接在table里这样写:<table border=0 cellspacing=0 xss=removed> 看清了啊,border-collapse只能是collapse,虽然border-collapse还有separate,inherit属性。用这 种方法可以把边框显示...
要让table的宽度固定我们可以给table元素设置table-layout:fixed;样式,但这样表格的宽度问题是解决了,但是里面的内容并不会自动换行。我们还需要给td设置word-break: break-all; word-wrap:break-word;即可完美...
/*设置table的边框*/ } td,th{ border:1px solid #F00; } /*为单元格单独设置边框*/ CSS控制表格样式 学习CSS控制表格边框时需要注意以下几点: border-collapse属性的属性值除了collapse(合并)之外,还可以为...
<html><head><title>HTML Table</title></head> <style type=”text/css”> TABLE { background: blue; border-collapse: separate;...TD, TH { background: white; bord
<table width=”200″ border=”0″ xss=...<td> </td> <td> </td> <td> </td> </table> 那个style就是只有外边框,如果直接border就是表格的所有边框。 border-style:solid; border-color:Lime; (颜色)
代码如下: <...– .bg td{ font-size:12px; text-align:left; line-height:15px; height:20px; } .bg td.tit{ background-color:#e2e2e2; height:17px; text-align:center; line-height:15px; } .bg