[IE兼容性] Table 之边框

原创 2013年12月05日 18:19:27

前言

table 是HTML  中常用的标签。

定义一个简单的表格

<!--Add by oscar999-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Author" CONTENT="oscar999">
<script>
</script>
<style>

</style>
</HEAD>

<BODY>
<table>
  <tr>
    <td>1</td>
	<td>2</td>
	<td>3</td>
  </tr>
  <tr>
    <td>4</td>
	<td>5</td>
	<td>6</td>
  </tr>
  <tr>
    <td>7</td>
	<td>8</td>
	<td>9</td>
  </tr>
</table>

</BODY>
</HTML>

以上的效果是不会出现边框的。


给表格添加边框

1. 方式一: 定义table 的border 属性

<table border=1>

效果是会出现双边框的效果。

2. 方式二: 使用CSS 定义

边框的定义样式可以定义的值有:

border-width规定边框的宽度。参阅:border-width 中可能的值。
border-style规定边框的样式。参阅:border-style 中可能的值。
border-color规定边框的颜色。参阅:border-color 中可能的值。
<!--Add by oscar999-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Author" CONTENT="oscar999">
<script>
</script>
<style>
table{
	border: 1px solid blue;
}
</style>
</HEAD>

<BODY>
<table>
  <tr>
    <td>1</td>
	<td>2</td>
	<td>3</td>
  </tr>
  <tr>
    <td>4</td>
	<td>5</td>
	<td>6</td>
  </tr>
  <tr>
    <td>7</td>
	<td>8</td>
	<td>9</td>
  </tr>
</table>

</BODY>
</HTML>
效果如下:

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

如果要加上内边框的话, 样式的定义:

<style>
table,td{
	border: 1px solid blue;
}
</style>



合并边框

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

<style>
table{
	 border-collapse:collapse;
}
table,td{  
	border: 1px solid blue;
}
</style>


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 加上  &nbsp;

2. 使用上面介绍的 border-collapse:collapse; 就可以了。


笔者在使用jqgrid3.6 版别开发的时候就遇到过此问题。



[IE兼容性] Table 之边框

---此处设置外边框颜色 房屋基本信息            房屋狀態 ---此处设置单元格边框颜色 $TYPE$ 房屋類別此处设置单元下边框颜色 $FWLB$ 所在地區 $...
  • hao_ds
  • hao_ds
  • 2014年08月06日 10:53
  • 1345

漂亮的css ul li table(表格)兼容IE8,IE9,FF21

项目中用到一个表格,现在提取出来。在IE6下面有点问题; 纯div ul li css 实现的table表格效果。带滚动条 IE8,IE9效果图: FF效果: IE6效果有点问题: ...

HTML Table局部布局与浏览器兼容性

HTML Table局部布局与浏览器兼容性 注意:案例中所涉及的图片素材,页面下方提供下载 1、技术目标: 掌握使用table tr td局部布局的情况处理浏览器兼容性问题 ...
  • Mercop
  • Mercop
  • 2012年08月19日 00:18
  • 11946

老版本IE下td没有内容为空时不显示边框的解决办法

最近做一个老项目只能支持ie7以下,遇到了这个问题,将解决方法记录如下: 一、通过CSS 在table的css里面加: border-collapse:collapse;在td的css里面加:em...
  • jarniyy
  • jarniyy
  • 2016年05月23日 14:32
  • 308

第一行固定,第二行充满屏幕,使用table,兼容ie8以上

在进行布局的时候会遇见这种需求,第一行固定,第二行充满屏幕,而且第二行超出在第二行出现滚动条,并且第二行中有多列,几列之前可以宽度灵活调整,隐藏一列,其他列的宽度要随之变化,在不用js计算的情况下,纯...

2004年6月 SCJP考试回顾

上个月参加了SCJP考试,成绩是71的,本来这种分数是没有资格谈考试经历的。但如果你也和我一样,只是在实际的应用java,并且期望获得一个认证,下面的信息或许有些参考价值。 费用SCJP认证今年是6折...

SCJP认证考试复习笔记系列之二

      下周去考SCJP,这两天再复习一下。 调用线程实例的start()方法他的run()方法会运行,你直接调用run()它也会运行。 Java中方法参数是按值传递的,最简单的情况就是传递基本...

adf开发出的table在IE8上面设置兼容性视图,导致显示标题和数据错位

首先,我们看下上传的2张图片的差异.        第一张图片是在有问题的机器上面I...
  • zybzla
  • zybzla
  • 2014年07月11日 20:22
  • 731

IE10兼容性白皮书

  • 2013年04月17日 18:10
  • 6.12MB
  • 下载

IE兼容性解决

  • 2017年03月20日 10:33
  • 339KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:[IE兼容性] Table 之边框
举报原因:
原因补充:

(最多只允许输入30个字)