当前位置: 开发笔记 > 后端 > 正文

[IE兼容性]Table之边框

作者：菲斯可儿 | 来源：互联网 | 2023-06-12 16:42

前言table是HTML中常用的标签。定义一个简单的表格<!DOCTYPEHTMLPUBLIC"-

前言

table 是HTML 中常用的标签。

定义一个简单的表格

  
  
  
  
  
  
  
  
  
  
  
















          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 中可能的值。

  
  
  
  
  
  
  
  
  
  
  
















          1       2       3     
          4       5       6     
          7       8       9

效果如下：

仅仅是最外层有边框，内边框没有。

如果要加上内边框的话，样式的定义：

合并边框

上面表格具有双线条边框。这是由于 table、 td 元素都有独立的边框。
如果需要把表格显示为单线条边框，使用 border-collapse 属性，定义如下

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"----设置所有边框颜色

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为定义一个边框)

表中表效果Ⅰ

表中表效果Ⅱ

看起来和上面的一样，可是这个才是真正的表中表哦。
(在中插入一个表格)

来自: http://hi.baidu.com/%C4%FE%BE%B2%B5%C4%B7%B1%BB%AA/blog/item/56d3997547208c15b051b9c5.html

html
ci

推荐阅读

h2
CSS3选择器的使用方法详解，提高Web开发效率和精准度

本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ... [详细]

蜡笔小新 2023-12-14 14:37:52
h2
VScode格式化文档换行或不换行的设置方法

本文介绍了在VScode中设置格式化文档换行或不换行的方法，包括使用插件和修改settings.json文件的内容。详细步骤为：找到settings.json文件，将其中的代码替换为指定的代码。 ... [详细]

蜡笔小新 2023-12-14 17:15:38
h2
求解hdu 1003 java题目的动态规划优化方法

本文讨论了如何优化解决hdu 1003 java题目的动态规划方法，通过分析加法规则和最大和的性质，提出了一种优化的思路。具体方法是，当从1加到n为负时，即sum(1,n)sum(n,s)，可以继续加法计算。同时，还考虑了两种特殊情况：都是负数的情况和有0的情况。最后，通过使用Scanner类来获取输入数据。 ... [详细]

蜡笔小新 2023-12-14 13:11:00
h2
九度OnlineJudge之1002：Grading问题的解决方法

本文介绍了九度OnlineJudge中的1002题目“Grading”的解决方法。该题目要求设计一个公平的评分过程，将每个考题分配给3个独立的专家，如果他们的评分不一致，则需要请一位裁判做出最终决定。文章详细描述了评分规则，并给出了解决该问题的程序。 ... [详细]

蜡笔小新 2023-12-14 13:00:09
h2
如何自行分析定位SAP BSP错误

The“BSPtag”Imentionedintheblogtitlemeansforexamplethetagchtmlb:configCelleratorbelowwhichi ... [详细]

蜡笔小新 2023-12-14 19:58:05
h2
【机器学习】生成式对抗网络模型综述

生成式对抗网络模型综述摘要生成式对抗网络模型(GAN)是基于深度学习的一种强大的生成模型，可以应用于计算机视觉、自然语言处理、半监督学习等重要领域。生成式对抗网络 ... [详细]

蜡笔小新 2023-12-14 17:51:18
注入
Principle for Mac(交互式屏幕设计软件)免激活版

Mac上好用的交互式屏幕设计软件，PrincipleforMac是一款交互式屏幕设计软件，principle mac让您的设计将以原则出现，随时为您注入新的活力。如果您进行更改，再 ... [详细]

蜡笔小新 2023-12-14 17:18:37
python
如何在Pygame中使用矩形对表面进行涂色？

本文介绍了在Pygame中使用矩形对表面进行涂色的方法。通过查阅Pygame文档中的blit函数，可以了解到如何将一个表面的特定部分复制到另一个表面的指定位置上。具体的解决方法和参数说明在文中都有详细说明。 ... [详细]

蜡笔小新 2023-12-14 17:07:29
struct
伊振华作品 | 沈阳市智慧城市运行管理中心的设计与建设

本文介绍了设计师伊振华受邀参与沈阳市智慧城市运行管理中心项目的整体设计，并以数字赋能和创新驱动高质量发展的理念，建设了集成、智慧、高效的一体化城市综合管理平台，促进了城市的数字化转型。该中心被称为当代城市的智能心脏，为沈阳市的智慧城市建设做出了重要贡献。 ... [详细]

蜡笔小新 2023-12-14 16:35:39
python
向QTextEdit拖放文件的方法及实现步骤

本文介绍了在使用QTextEdit时如何实现拖放文件的功能，包括相关的方法和实现步骤。通过重写dragEnterEvent和dropEvent函数，并结合QMimeData和QUrl等类，可以轻松实现向QTextEdit拖放文件的功能。详细的代码实现和说明可以参考本文提供的示例代码。 ... [详细]

蜡笔小新 2023-12-14 16:06:38
python
Linux重启网络命令实例及关机和重启示例教程

本文介绍了Linux系统中重启网络命令的实例，以及使用不同方式关机和重启系统的示例教程。包括使用图形界面和控制台访问系统的方法，以及使用shutdown命令进行系统关机和重启的句法和用法。 ... [详细]

蜡笔小新 2023-12-14 15:52:52
python
IB 物理真题解析：比潜热、理想气体的应用

本文是对2017年IB物理试卷paper 2中一道涉及比潜热、理想气体和功率的大题进行解析。题目涉及液氧蒸发成氧气的过程，讲解了液氧和氧气分子的结构以及蒸发后分子之间的作用力变化。同时，文章也给出了解题技巧，建议根据得分点的数量来合理分配答题时间。最后，文章提供了答案解析，标注了每个得分点的位置。 ... [详细]

蜡笔小新 2023-12-14 15:00:29
python
在Windows 8上安装gvim中的插件的错误加载问题

本文讨论了在Windows 8上安装gvim中插件时出现的错误加载问题。作者将EasyMotion插件放在了正确的位置，但加载时却出现了错误。作者提供了下载链接和之前放置插件的位置，并列出了出现的错误信息。 ... [详细]

蜡笔小新 2023-12-14 14:44:00
h2
[从头学数学] 第101节比例的相关问题研究和修炼

本文介绍了[从头学数学]中第101节关于比例的相关问题的研究和修炼过程。主要内容包括[机器小伟]和[工程师阿伟]一起研究比例的相关问题，并给出了一个求比例的函数scale的实现。 ... [详细]

蜡笔小新 2023-12-14 13:39:15
h2
C#学习教程：解析CIM_DateTime为.Net DateTime

本文介绍了如何将CIM_DateTime解析为.Net DateTime，并分享了解析过程中可能遇到的问题和解决方法。通过使用DateTime.ParseExact方法和适当的格式字符串，可以成功解析CIM_DateTime字符串。同时还提供了关于WMI和字符串格式的相关信息。 ... [详细]

蜡笔小新 2023-12-14 12:19:34

菲斯可儿

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章

[IE兼容性]Table之边框

前言

给表格添加边框

合并边框

IE8 以下出现td无内容 就无边框的问题

IE8 以下出现td无内容就无边框的问题