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

[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

推荐阅读

static
RTThread线程间通信

线程中通信在裸机编程中，经常会使用全局变量进行功能间的通信，如某些功能可能由于一些操作而改变全局变量的值，另一个功能对此全局变量进行读取& ... [详细]

蜡笔小新 2024-11-18 14:56:11
java
php三角形面积,335宝石大全

php三角形面积,335宝石大全 ... [详细]

蜡笔小新 2024-11-18 14:51:57
gcc
pypy 真的能让 Python 比 C 还快么？

作者：肖恩顿来源：游戏不存在最近“pypy为什么能让python比c还快”刷屏了，原文讲的内容偏理论，干货比较少。我们可以再深入一点点，了解pypy的真相。正式开始之前，多唠叨两句 ... [详细]

蜡笔小新 2024-11-18 08:45:23
mysql
MySQL Administrator: 监控与管理工具

本文介绍了 MySQL Administrator 的主要功能，包括图形化监控 MySQL 服务器的实时状态、连接健康度、内存健康度以及如何创建自定义的健康图表。此外，还详细解释了状态变量和系统变量的管理。 ... [详细]

蜡笔小新 2024-11-18 08:20:16
mysql
Python 日志记录模块详解

日志记录机制是软件开发中不可或缺的一部分，它帮助开发者追踪和调试程序运行时的各种异常。Python 提供了内置的 logging 模块，使我们在代码中记录和管理日志信息变得更加方便。本文将详细介绍如何使用 Python 的 logging 模块。 ... [详细]

蜡笔小新 2024-11-18 16:23:46
touch
CentOS7通过RealVNC实现多人使用服务器桌面

背景：公司研发团队通过VNC登录到CentOS服务器的桌面实现软件开发工作为防止数据外泄，需要在RealVNC设置禁止传输文件、访问粘贴板等策略过程&# ... [详细]

蜡笔小新 2024-11-18 09:22:21
上传
PCIe中的弹性缓冲原理解析

PCIe是一种高速串行总线，其传输信号为差分信号，并采用同步传输方式。然而，PCIe并没有专用的同步时钟。本文将详细介绍PCIe中的弹性缓冲（Elastic Buffer）原理，探讨其如何处理时钟差异，确保数据传输的稳定性和可靠性。 ... [详细]

蜡笔小新 2024-11-17 21:08:36
cpython
解决 Python 3.4 中的 Pygame 导入错误

本文介绍了在 Python 3.4 中使用 Pygame 时遇到的导入错误及其解决方案。 ... [详细]

蜡笔小新 2024-11-17 20:58:51
ci
Oracle 10g 和 11g 32位 OCI.DLL 文件下载

32位 PL/SQL Developer 访问 64位 Oracle 11g 数据库时，需要使用 32位的 OCI.DLL 文件以确保正常连接和数据访问。本文将详细介绍如何获取并配置此文件。 ... [详细]

蜡笔小新 2024-11-17 20:10:35
ci
OSPF形成邻居关系的条件及验证

1、形成邻居条件：1）区域ID相同；2）hello，dead时间一致；3）认证&# ... [详细]

蜡笔小新 2024-11-17 20:02:59
ci
如何科学设定绩效计划中的KPI目标值？

本文探讨了在制定绩效计划时如何科学设定KPI目标值，包括使用STAR法则和SMART原则，并结合实际案例分析KPI与OKR的区别及其应用。 ... [详细]

蜡笔小新 2024-11-17 18:50:23
java
Java中字符串截取方法详解

本文详细介绍了Java中常用的字符串截取方法及其应用场景，帮助开发者更好地理解和使用这些方法。 ... [详细]

蜡笔小新 2024-11-17 18:10:47
ci
CentOS 7 上安装与完全卸载 GitLab 的详细指南

本文详细介绍了如何在 CentOS 7 及其衍生发行版（如 Red Hat, Oracle, Scientific Linux 7）上安装和完全卸载 GitLab。包括安装必要的依赖关系、配置防火墙、安装 GitLab 软件包以及常见问题的解决方法。 ... [详细]

蜡笔小新 2024-11-17 17:42:51
ci
实现左右滚动公告的HTML代码

本文提供了一段用于实现网页中左右滚动公告效果的HTML代码，并附带了示例图和详细说明。 ... [详细]

蜡笔小新 2024-11-17 16:26:26
ci
深入解析RelativeLayout、LinearLayout与FrameLayout的性能差异

本文详细分析了FrameLayout和LinearLayout的性能对比，通过具体的测量数据和源码解析，探讨了不同布局在不同场景下的性能表现。 ... [详细]

蜡笔小新 2024-11-17 16:09:35