[IE兼容性] Table 之边框 |
您所在的位置：网站首页 › 20系降压超频 › [IE兼容性] Table 之边框 |
[IE兼容性] Table 之边框
|
前言
table 是HTML 中常用的标签。 定义一个简单的表格 New Document 1 2 3 4 5 6 7 8 9 以上的效果是不会出现边框的。
给表格添加边框 1. 方式一： 定义table 的border 属性
效果是会出现双边框的效果。
2. 方式二： 使用CSS 定义 边框的定义样式可以定义的值有： border-width规定边框的宽度。参阅：border-width 中可能的值。border-style规定边框的样式。参阅：border-style 中可能的值。border-color规定边框的颜色。参阅：border-color 中可能的值。 New Document table{ border: 1px solid blue; } 1 2 3 4 5 6 7 8 9 效果如下：
仅仅是最外层有边框， 内边框没有。 如果要加上内边框的话， 样式的定义： table,td{ border: 1px solid blue; } 合并边框上面表格具有双线条边框。这是由于 table、 td 元素都有独立的边框。 如果需要把表格显示为单线条边框，使用 border-collapse 属性， 定义如下 table{ border-collapse:collapse; } table,td{ border: 1px solid blue; } IE8 以下出现td无内容 就无边框的问题看上去很简单， 也很圆满。 但是在IE 8 以下的浏览器中会出现边框丢失的状况。 发生的状况是td 的值为空 以上的CSS 如下方式定义： table{ border:green dotted; border-width: 2 0 0 2; } td{ border:green dotted; border-width: 0 2 2 0; } Chrome 的效果
但是在IE的效果 解决方法有两种： 1. 空的td 加上 ; 2. 使用上面介绍的 border-collapse:collapse; 就可以了。 HTML_TABLE内外边框颜色设置及页面居中 ---此处设置外边框颜色 房屋基本信息 房屋狀態 ---此处设置单元格边框颜色 $TYPE$ 房屋類別此处设置单元下边框颜色 $FWLB$ 所在地區 $XS$ ---此处设置外边框颜色 房屋基本信息 房屋狀態 ---此处设置单元格边框颜色 $TYPE$ 房屋類別此处设置单元下边框颜色 $FWLB$ 所在地區 $XS$ bordercolor="#254389"----设置所有边框颜色 style= "border:1px solid #000000;border-right- color :#FF0000;" 整体加边框: border:1px solid #000000; 1PX为边框大小,#000000为颜色! 只给某一边加边框: 右边框 border-right- color :#FF0000; 左边框 border-left- color :#FF0000; 上边框 border-top- color :#FF0000;下边框 border-bottom-color:#FF0000; HTML：table表格画线控制 一、表格中单元格之间分隔线的隐藏方法 第 一 行 第 二 行 第 三 行 这个表格去掉了单元格之间的纵向分隔线 第 第 第 一 二 三 列 列 列 这个表格去掉了单元格之间的横向分隔线 横 线 竖 线 都 没 了 这个表格去掉了单元格之间的纵向分隔线和横向分隔线 其实上面的三个表格都有三行三列，隐藏分隔线的诀窍在于rules，察看这三个表格的源代码，我们可以看到标签中都有 rules。 它有三个参数(cols,rows,none)，当rules=cols时，表格会隐藏纵向的分隔线，这样我们就只能看到表格的行；当rules= rows时，则 隐藏了横向的分隔线，这样我们只能看到表格的列；而当rules=none时，纵向分隔线和横向分隔线将全部隐藏。 二、表格边框的隐藏 普 表 通 格 这是一普通的表格 不怕 下雨 只显示上边框 下起雨来 该怎么办 只显示下边框 上不着天 下不着地 只显示左、右边框 两边走开 老子姓王 只显示上、下边框 左右 为难 只显示左边框 左右 为难 只显示右边框 光秃秃 全脱了 不显示任何边框 表格边框的显示与隐藏，是可以用frame参数来控制的。请注意它只控制表格的边框图，而不影晌单元格。 只显示上边框 只显示下边框 只显示左、右边框 只显示上、下边框 只显示左边框 只显示右边框 不显示任何边框三、表格边框 普 表 通 格 这是一普通的表格 普 表 通 格 细 表 线 格 表格加上了漂亮的细线 (利用cellspacing1像素间隙和表格与单元格背景的不同) 细 表 线 格 细 表 线 格 这和上面那个可不一样，它用的是CSS，效果却一样。 (对单元格border的定义) 细 表 线 格 细 表 线 格 再进一步，把边框变成虚线，同样是CSS的神奇作用。 细 表 线 格 细线表格的扩展应用，奥妙就是在第个单元格中再套入一个表格。 立 表 体 格 立体感的表格 (简单的亮暗边框设置，注意只有IE支持这种效果) 立 表 体 格 无名表格 给表格加上一个表头 (应用和标签) 无名表格 表中表效果Ⅰ 给表头再加个框 (用CSS为定义一个边框) |
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |