[IE兼容性] Table 之边框

10914人阅读 评论(0) 收藏 举报
分类:

前言

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 版别开发的时候就遇到过此问题。



0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:3474632次
    • 积分:25041
    • 等级:
    • 排名:第251名
    • 原创:448篇
    • 转载:68篇
    • 译文:3篇
    • 评论:323条
    博客专栏
    Ext JS

    文章:44篇

    阅读:209588
    PLM

    文章:28篇

    阅读:51319
    Web Chart

    文章:15篇

    阅读:53776
    最新评论