Html
, ,

一像素边框表格的几种实现方法

本文大纲
  1. 1. 一、基础铺垫：
  2. 2. 二、方案（从上到下推荐度逐渐降低）：
  3. 3. 三：注意点

简单谈下现代一像素表格的实现

一、基础铺垫：

① table元素的部分属性（针对于本话题）：

1
2
<table width="100%" border="0" cellspacing="0" cellpadding="0" bordercolor="#000000"
     bgcolor="#ffffff" bordercolordark="" bordercolorlight="" ></table>
  • border 表格内单元格边框的宽度 [STF][^hello]
    [^hello]:注：DTD指示此属性允许在哪种DTD中使用。S=Strict, T=Transitional, F=Frameset.
  • cellspacing 单元格与单元格之间的 间距 [STF]
  • cellpadding 单元格的内边距 [STF]
  • width 表格的宽度 [STF]
  • bordercolor、bgcolor [TF]
但如大家熟知，给border定义为border=”1”，表现缺不符预期，是比一像素粗的边框。
综上这些在元素内用属性定义表现的方式，已被逐渐不推荐——弃用。真正的表现性的东西，应该由css来完成。
但目前可行的，相对科学的、实惠的实现方式究竟如何呢？

② table方面css部分属性（针对于本话题）：

  • table{border-collapse:collapse;border-spacing:0;}
  • td{padding:0;} 相当于cellpadding
  • border-collapse 定义相邻单元格边框是否合并
  • border-spacing 定义单元格与单元格之间的 间距
相当于cellspacing（除ie6/7外浏览器识别，ie6/7用expression弥补，
见下，管它性能不性能的呢，谁让他用破ie呢）

二、方案（从上到下推荐度逐渐降低）：

① css法（table元素上的一些标签属性不用写）

1
2
table{border-collapse:collapse;border-spacing:0;jerry:expression(cellSpacing='0');}
td{border:1px solid #f00;}

② 表格背景和单元格背景色差配合法（table元素上的一些标签属性不用写）

1
2
table{ background:#000;border-collapse:separate;border-spacing:1px;jerry:expression(cellSpacing='1');}
td{background:#fff;}

③ css边框拼补法（table元素上的一些标签属性不用写）

1
2
3
4
5
table{
    border-collapse:collapse;border-spacing:0;jerry:expression(cellSpacing='0');
    border-right:1px solid #000;border-bottom:1px solid #000;
}
td{border-left:1px solid #000;border-top:1px solid #000;}

④ css和标签属性结合法

1
2
table{border-collapse:collapse;border-spacing:0;jerry:expression(cellSpacing='0');}
<table border="1" bordercolor="#330066"></table>

⑤ 标签法（原理同②）

代码折叠 代码展开 
1
2
3
4
5
6
7
8
9
<table border="0" cellspacing="1" cellpadding="0" bgcolor="#000" >
    <tr bgcolor="#FFFFFF"><td></td><td></td><td></td></tr>
    <tr bgcolor="#FFFFFF"><td></td><td></td><td></td></tr>
</table>
或
<table border="0" cellspacing="1" cellpadding="0" bgcolor="#000" >
    <tr><td bgcolor="#FFFFFF"></td><td bgcolor="#FFFFFF"></td><td bgcolor="#FFFFFF"></td></tr>
    <tr><td bgcolor="#FFFFFF"></td><td bgcolor="#FFFFFF"></td><td bgcolor="#FFFFFF"></td></tr>
</table>

三：注意点

经测试对于单元格边距，单元格间距，单元格边框这三项，如果在元素标签的属性 和 css中的属性 同时定义的情况下：（此结果在各浏览器下和各ie版本下以及各ie版本的各种兼容模式下都适合）

  • css中的优先级比标签属性的高的是：单元格边距、单元格间距 这两项。也就是说比如以下这种情况下，

    1
    2
    3
    table{border-spacing:0;jerry:expression(cellSpacing='0');}
    table td{padding:0;}
    <table  cellpadding="20" cellspacing="20"></table>

    实际表现以css定义为准。

  • css的定义与标签属性的定义累加（如果有相邻合并，则只累加不相邻的单元格边框）的是：单元格边框宽度。也就是说比如以下这种情况下，

    1
    2
    table td{border:3px solid #000;}
    <table  border="5"></table>

    则实际表现结果的单元格边框宽度为8px。注意如果有相邻合并定义，则只累加不相邻的单元格边框。


附html代码，可以用不同浏览器，及IE的各个版本去测试，及其各种兼容模式，全部没问题。

代码折叠 代码展开 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{margin:0;padding:0;}
body{margin:100px;}
.table{
<span style="white-space:pre">    </span>border-collapse:collapse;border-spacing:0;jerry:expression(cellSpacing='0');
<span style="white-space:pre">    </span>table-layout:fixed;word-break:break-all;word-wrap:break-word;overflow-wrap:break-word;white-space:normal;
}
.t1{}
.t1 td{border:1px solid #000;}
.t2{border-collapse:separate;border-spacing:1px;jerry:expression(cellSpacing='1');background:#000;}
.t2 td{background:#fff;}
.t3{border-right:1px solid #000;border-bottom:1px solid #000;}
.t3 td{border-left:1px solid #000;border-top:1px solid #000;}
.t4{border-collapse:collapse;border-spacing:0;jerry:expression(cellSpacing='0');}
</style>
</head>
<body>
<table class="table t1">
  <tr>
    <td>无标题文档</td>
    <td>无标题文档;</td>
    <td>无标题文档;</td>
  </tr>
  <tr>
    <td>无标题文档</td>
    <td>无标题文档</td>
    <td>无标题文档</td>
  </tr>
</table><p>&nbsp;</p>

<table class="table t2">
  <tr>
    <td>无标题文档</td>
    <td>无标题文档;</td>
    <td>无标题文档;</td>
  </tr>
  <tr>
    <td>无标题文档</td>
    <td>无标题文档</td>
    <td>无标题文档</td>
  </tr>
</table><p>&nbsp;</p>

<table class="table t3">
  <tr>
    <td>无标题文档</td>
    <td>无标题文档;</td>
    <td>无标题文档;</td>
  </tr>
  <tr>
    <td>无标题文档</td>
    <td>无标题文档</td>
    <td>无标题文档</td>
  </tr>
</table><p>&nbsp;</p>

<table class="table t4" border="1" bordercolor="#000000">
  <tr>
    <td>无标题文档</td>
    <td>无标题文档;</td>
    <td>无标题文档;</td>
  </tr>
  <tr>
    <td>无标题文档</td>
    <td>无标题文档</td>
    <td>无标题文档</td>
  </tr>
</table><p>&nbsp;</p>

<table border="0" cellspacing="1" cellpadding="0" bgcolor="#000">
  <tr bgcolor="#ffffff">
    <td>无标题文档</td>
    <td>无标题文档;</td>
    <td>无标题文档;</td>
  </tr>
  <tr bgcolor="#ffffff">
    <td>无标题文档</td>
    <td>无标题文档</td>
    <td>无标题文档</td>
  </tr>
</table><p>&nbsp;</p>

<table border="0" cellspacing="1" cellpadding="0" bgcolor="#000">
  <tr>
    <td bgcolor="#ffffff">无标题文档</td>
    <td bgcolor="#ffffff">无标题文档;</td>
    <td bgcolor="#ffffff">无标题文档;</td>
  </tr>
  <tr>
    <td bgcolor="#ffffff">无标题文档</td>
    <td bgcolor="#ffffff">无标题文档</td>
    <td bgcolor="#ffffff">无标题文档</td>
  </tr>
</table>
</body>
</html>