第一种方法：
1、将table的属性设置为：BORDER=0 、cellspacing=1 ；
2、设置table的背景色为即你要设置的table的边框颜色；
3、设置所有td背景色为#ffffff白色；
第二种方法：
1、设置BORDER=0 ；
2、再通过CSS，给Table加上1px的border-top,border-left；
3、然后再设置所有的td的border-right,border-bottom；
第三种方法（推荐）：
1、设置table的CSS为{border-collapse:collapseborder-style: solidborder-width: 1px}
注：border-collapse:collapse
separate默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
collapse如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
inherit 规定应该从父元素继承 border-collapse 属性的值。
2、再设置td的CSS为{border-style: solidborder-width: 1px}
转自： https://www.cnblogs.com/qq2806933146xiaobai/p/12407749.html
一、基础铺垫：① table元素的部分属性(针对于本话题)：1
2
bgcolor="#ffffff" bordercolordark="" bordercolorlight="" >
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:collapseborder-spacing:0}
td{padding:0} 相当于cellpadding
border-collapse 定义相邻单元格边框是否合并
border-spacing 定义单元格与单元格之间的 间距相当于cellspacing(除ie6/7外浏览器识别，ie6/7用expression弥补，
见下，管它性能不性能的呢，谁让他用破ie呢)
二、方案(从上到下推荐度逐渐降低)：
① css法(table元素上的一些标签属性不用写)1
2table{border-collapse:collapseborder-spacing:0jerry:expression(cellSpacing='0')}
td{border:1px solid
② 表格背景和单元格背景色差配合法(table元素上的一些标签属性不用写)1
2table{ background:#000border-collapse:separateborder-spacing:1pxjerry:expression(cellSpacing='1')}
td{background:#fff}
③ css边框拼补法(table元素上的一些标签属性不用写)1
2
3
4
5table{
border-collapse:collapseborder-spacing:0jerry:expression(cellSpacing='0')
border-right:1px solid #000border-bottom:1px solid #000
}
td{border-left:1px solid #000border-top:1px solid #000}
④ css和标签属性结合法1
2table{border-collapse:collapseborder-spacing:0jerry:expression(cellSpacing='0')}
⑤ 标签法(原理同②)1
2
3
4
5
6
7
8
9
或
三：注意点
经测试对于单元格边距，单元格间距，单元格边框这三项，如果在元素标签的属性 和 css中的属性 同时定义的情况下：(此结果在各浏览器下和各ie版本下以及各ie版本的各种兼容模式下都适合)css中的优先级比标签属性的高的是：单元格边距、单元格间距 这两项。也就是说比如以下这种情况下，1
2
3table{border-spacing:0jerry:expression(cellSpacing='0')}
table td{padding:0}
实际表现以css定义为准。
css的定义与标签属性的定义累加(如果有相邻合并，则只累加不相邻的单元格边框)的是：单元格边框宽度。也就是说比如以下这种情况下，1
2table td{border:3px solid #000}
则实际表现结果的单元格边框宽度为8px。注意如果有相邻合并定义，则只累加不相邻的单元格边框。
附html代码，可以用不同浏览器，及IE的各个版本去测试，及其各种兼容模式，全部没问题
html设置table的边框的方法是使用border 属性实现。
说明：
border 属性规定表格单元周围是否显示边框。
值 "1" 指示应该显示边框，且表格不用于布局目的。
在 HTML5 中，border 属性仅用于指示表格是否用于布局目的，且只允许属性值 "" 或 "1"。
完整用法举例：
1、html中的table代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>table的边框</title>
</head>
<body>
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>
2、运行后的效果：
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）