`
hougbin
  • 浏览: 492699 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

td 边框

    博客分类:
  • JAVA
阅读更多

同时用样式表为 table、td 指定了边框后,可能会发生重叠,这取决于 border-collapse。

<table>
<tr>
    <td>
   
<table style="border:1px solid red;">
<tr>
    <td style="border:1px solid blue;">&nbsp;</td>
    <td style="border:1px solid blue;">&nbsp;</td>
    <td style="border:1px solid blue;">&nbsp;</td>
    <td style="border:1px solid blue;">&nbsp;</td>
</tr>
</table>
   
    </td>
    <td>
   
<table style="border:1px solid red;border-collapse:collapse;">
<tr>
    <td style="border:1px solid blue;">&nbsp;</td>
    <td style="border:1px solid blue;">&nbsp;</td>
    <td style="border:1px solid blue;">&nbsp;</td>
    <td style="border:1px solid blue;">&nbsp;</td>
</tr>
</table>
   
    </td>
</tr>
</table>

FF 结果如下:

table 与 td 边框重叠问题

  • 左边是未指定 border-collapse 的(默认为 separate)。
  • 右边是指定了 border-collapse 为 collapse 的。

IE 结果如下:

IE 中 table 与 td 边框重叠问题

  • 左边是未指定 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>

分享到:
评论

相关推荐

    表格td边框可左右拖动的实例

    当显示的table宽度受限制固定宽度时,表格的展示列又很多的时候,如何更好地处理并展示,可下载资源查看,可拖动表格,表格可左右拖动,表格td边框可以左右拖动,表格里的内容可以很好的显示。

    td 无内容显示边框

    NULL 博文链接:https://zhouchaofei2010.iteye.com/blog/1772027

    让Table的TD有边框而Table右左没有边框的CSS样式

    //显示右边框为1px,如果不想显示就为0px BORDER-TOP: #f9f9f9 0px solid; //显示上边框为1px,如果不想显示就为0px BORDER-LEFT: #f9f9f9 0px solid;//显示左边框为1px,如果不想显示就为0px BORDER-BOTTOM: #f5f5...

    td无边框处理

    td 无边框处理技巧

    Html_的table_边框设置

    Html_的table_边框设置

    表单边框样式

    "&gt;显示右边框&lt;/td&gt; &lt;td style="border-left:#cccccc solid 1px;"&gt;显示左边框&lt;/td&gt; &lt;td style="border-top:#cccccc solid 1px;"&gt;显示上边框&lt;/td&gt; &lt;td style="border-bottom:#cccccc solid 1px;"&gt;显示下边框&lt;/td&gt;

    当td为空时怎样显示其边框

    原因倒也不复杂:因为在 IE 下( Firefox 似乎和 IE 一致)如果某个 td 的内容为空的话,即便你设置了高度和宽度,这个 cell 的边框样式也是不会被显示出来的; Opera 则不管是否有内容与否,一概应用样式来渲染。这...

    ie6 表格td中无内容时不显示边框的解决办法

    这样: &lt;td&gt; &lt;/td&gt; 2、直接在table里这样写:&lt;table border=0 cellspacing=0 xss=removed&gt; 看清了啊,border-collapse只能是collapse,虽然border-collapse还有separate,inherit属性。用这 种方法可以把边框显示...

    TD7.6软件测试报告

    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...

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

    td,th{ border:1px solid #F00; } /*为单元格单独设置边框*/ CSS控制表格样式 学习CSS控制表格边框时需要注意以下几点: border-collapse属性的属性值除了collapse(合并)之外,还可以为separate(分离),默认为...

    html设置虚线边框的方法

    table tr td 2、实例用到CSS属性单词 border width height 3、实现虚线的CSS重点介绍 border为边框属性,如果要实现对象边框效果,要设置边框宽度、边框颜色、边框样式(实线还是虚线) border:1px dashed #F00 这个...

    JS动态改变表格边框宽度的方法

    本文实例讲述了JS动态改变表格边框宽度的方法。分享给大家供大家参考。具体如下: 下面的JS代码通过表格对象的border属性修改表格边框宽度 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; [removed] function ...

    html做表格只显示表格的外边框

    我想问一个在dreamweaver中,我弄了一个登陆的表格,...&lt;td&gt; &lt;/td&gt; &lt;td&gt; &lt;/td&gt; &lt;td&gt; &lt;/td&gt; 那个style就是只有外边框,如果直接border就是表格的所有边框。 border-style:solid; border-color:Lime; (颜色)

    HTML表格标记教程(2):表格的边框属性BORDER

    默认情况下,表格的边框为0,我们可以为表格设置边框线。 基本语法 语法解释 通过BORDER属性定义边框线的宽度,单位为像素。 文件范例:10-2.htm 设定边框线的宽度。01 &lt;!– —————————— –&gt;02 &lt;!–...

    HTML表格标记教程(29):单元格的亮边框色属性BORDERCOLORLIGHT

    &lt;TD Bordercolorlight=color_VALUE&gt; 语法解释 定义颜色的时候,可以使用英文颜色名称或十六进制颜色值表现。 文件范例:10-27.htm 设定单元格亮边框的颜色。01 &lt;!– —————————— –&gt;02 &lt;!– 文件范例...

    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;

    Table显示你要显示的边框代码

    基本属性有:width(宽度)、height(高度)、border(边框值)、cellspacing(表格的内宽,即表格与tr之间的间隔)、 cellpadding(表格内元素的间隔,即tr与tr之间的间隔)、bordercolorlight(表格的亮边框颜色)...

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

    大多数朋友都会遇到给表格table设置边框的情况,但效果总是达不到预期,比如某几根线会...复制代码代码如下: table tr td{ border-top:1px solid red; } table{ border:1px solid red; border-top-width:0px; } 效果:

Global site tag (gtag.js) - Google Analytics