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

news/2024/11/18 8:32:58/

66b52468c121889b900d4956032f1009.png

8种机械键盘轴体对比

本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选?

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

一、基础铺垫:

① 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:collapse;border-spacing:0;}

td{padding:0;} 相当于cellpadding

border-collapse 定义相邻单元格边框是否合并

border-spacing 定义单元格与单元格之间的 间距相当于cellspacing(除ie6/7外浏览器识别,ie6/7用expression弥补,

见下,管它性能不性能的呢,谁让他用破ie呢)

二、方案(从上到下推荐度逐渐降低):

① css法(table元素上的一些标签属性不用写)1

2table{border-collapse:collapse;border-spacing:0;jerry:expression(cellSpacing='0');}

td{border:1px solid

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

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

td{background:#fff;}

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

2

3

4

5table{

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

2table{border-collapse:collapse;border-spacing:0;jerry:expression(cellSpacing='0');}

⑤ 标签法(原理同②)1

2

3

4

5

6

7

8

9

三:注意点

经测试对于单元格边距,单元格间距,单元格边框这三项,如果在元素标签的属性 和 css中的属性 同时定义的情况下:(此结果在各浏览器下和各ie版本下以及各ie版本的各种兼容模式下都适合)css中的优先级比标签属性的高的是:单元格边距、单元格间距 这两项。也就是说比如以下这种情况下,1

2

3table{border-spacing:0;jerry:expression(cellSpacing='0');}

table td{padding:0;}

实际表现以css定义为准。

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

2table td{border:3px solid #000;}

则实际表现结果的单元格边框宽度为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

无标题文档

*{margin:0;padding:0;}

body{margin:100px;}

.table{

border-collapse:collapse;border-spacing:0;jerry:expression(cellSpacing='0');

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');}

无标题文档无标题文档;无标题文档;
无标题文档无标题文档无标题文档
无标题文档无标题文档;无标题文档;
无标题文档无标题文档无标题文档
无标题文档无标题文档;无标题文档;
无标题文档无标题文档无标题文档
无标题文档无标题文档;无标题文档;
无标题文档无标题文档无标题文档
无标题文档无标题文档;无标题文档;
无标题文档无标题文档无标题文档
无标题文档无标题文档;无标题文档;
无标题文档无标题文档无标题文档

http://www.ppmy.cn/news/797628.html

相关文章

ubuntu18.04改变照片的像素大小

安装imagemagick sudo apt-get install imagemagick 改变像素大小(切换至相应的照片目录) mogrify -resize *x* -format jpg *.jpg 例如将1.jpg像素大小改为500*500 mogrify -resize 500x500 -format jpg 1.jpg

java 实现图片像素大小调整并压缩图片

public static void main(String[] args) throws IOException {File originalImage new File("C:\\Users\\Win\\Desktop\\faceImages\\14.jpg");System.out.println("源文件大小" originalImage.length());File resizedImg1 new File("C:\\Users\\…

python获取指定区域的像素_如何获得某个区域的像素值?

因此,由于我对编程比较陌生,所以我需要一些帮助来解决这个问题。 我在Windows计算机上使用SimpleCV和python2.7。 我要做的是让一个(自写)程序告诉我沿着一条预设线的像素值,这里最重要的是每个像素的颜色。在 我真的不知道从哪里开始&#x…

如何把一张照片的像素提高_教你三个将低分辨率图片放大放清晰的方法

原标题:教你三个将低分辨率图片放大放清晰的方法 相信很多人在工作以及和别人交流的时候都会遇到这样的情况:想找一张分辨率足够大,清晰度足够好的图片放在文章或者网站中时,却发现找遍全网也只能找到一张分辨率很低的小图,根本没法使用。如果只是在QQ上聊聊也就罢了,但要…

SLIC超像素分割算法

超像素概念是2003年Xiaofeng Ren提出和发展起来的图像分割技术,是指具有相似纹理、颜色、亮度等特征的相邻像素构成的有一定视觉意义的不规则像素块。它利用像素之间特征的相似性将像素分组,用少量的超像素代替大量的像素来表达图片特征,很大程度上降低了图像后处理…

图片如何降低分辨率 ?如何缩小照片分辨率不改变图像大小?

图片分辨率是生活中不太常见的一个概念,一般只有在使用证件照、打印图片时会遇到,那么如果我们的图片分辨率与所需要的分辨率不符合时应该怎么办呢?今天我们来给大家介绍一个图片修改分辨率的方法,支持修改jpg格式图片的分辨率&am…

python降低图片分辨率怎么调_使用PIL调整图片分辨率

需求: 因项目需求中有对照片分辨率的具体要求,需要进行已有照片的批量分辨率处理。已有照片统一为1024*768分辨率,要求处理成320*240 / 240*200两种分辨率形式。 难点: 对方要求中的240*200分辨率大小与我们已有照片分辨率不是同一个比例的。 解决方案: 如果直接resize(24…

halcon像素统计_Halcon一日一练:图像分辨率与像素

1、图像像素: 像素是指由图像的小方格即所谓的像素(pixel)组成的,这些小方块都有一个明确的位置和被分配的色彩数值,而这些一小方格的颜色和位置就决定该图像所呈现出来的样子。像素是构成图像的基本单元,通常以像素/英寸PPI(表示…