table css样式_html table居中

table css样式_html table居中12345html简单的table样式67/*gridtable*/8table.gridtable{9font-family:verdana,arial,sans-serif;10font-size:11px;11color:#333333;12border-width:1px;13border-color:#666666;14bor…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

1

2

3

4

5

html 简单的table样式

6

7 /*gridtable*/

8 table.gridtable{

9 font-family:verdana,arial,sans-serif;

10 font-size:11px;

11 color:#333333;

12 border-width:1px;

13 border-color:#666666;

14 border-collapse:collapse;

15 }

16 table.gridtable th{

17 border-width:1px;

18 padding:8px;

19 border-style:solid;

20 border-color:#666666;

21 background-color:#dedede;

22 }

23 table.gridtable td{

24 border-width:1px;

25 padding:8px;

26 border-style:solid;

27 border-color:#666666;

28 background-color:#ffffff;

29 }

30 /*/gridtable*/

31

32 /*imagetable*/

33 table.imagetable{

34 font-family:verdana,arial,sans-serif;

35 font-size:11px;

36 color:#333333;

37 border-width:1px;

38 border-color:#999999;

39 border-collapse:collapse;

40 }

41 table.imagetable th{

42 background:#b5cfd2 url(‘cell-blue.jpg‘);

43 border-width:1px;

44 padding:8px;

45 border-style:solid;

46 border-color:#999999;

47 }

48 table.imagetable td{

49 background:#dcddc0 url(‘cell-grey.jpg‘);

50 border-width:1px;

51 padding:8px;

52 border-style:solid;

53 border-color:#999999;

54 }

55 /*/imagetable*/

56 /*altrowstable*/

57

58 table.altrowstable{

59 font-family:verdana,arial,sans-serif;

60 font-size:11px;

61 color:#333333;

62 border-width:1px;

63 border-color:#a9c6c9;

64 border-collapse:collapse;

65 }

66 table.altrowstable th{

67 border-width:1px;

68 padding:8px;

69 border-style:solid;

70 border-color:#a9c6c9;

71 }

72 table.altrowstable td{

73 border-width:1px;

74 padding:8px;

75 border-style:solid;

76 border-color:#a9c6c9;

77 }

78 .oddrowcolor{

79 background-color:#d4e3e5;

80 }

81 .evenrowcolor{

82 background-color:#c3dde0;

83 }

84 /*/altrowstable*/

85

86 /*hovertable*/

87 table.hovertable{

88 font-family:verdana,arial,sans-serif;

89 font-size:11px;

90 color:#333333;

91 border-width:1px;

92 border-color:#999999;

93 border-collapse:collapse;

94 }

95 table.hovertable th{

96 background-color:#c3dde0;

97 border-width:1px;

98 padding:8px;

99 border-style:solid;

100 border-color:#a9c6c9;

101 }

102 table.hovertable tr{

103 background-color:#d4e3e5;

104 }

105 table.hovertable td{

106 border-width:1px;

107 padding:8px;

108 border-style:solid;

109 border-color:#a9c6c9;

110 }

111 /*/hovertable*/

112

113

114

115

116

117

table样式1:单像素边框CSS表格

118

119

120

Info Header 1

121

Info Header 2

122

Info Header 3

123

124

125

Text 1AText 1BText 1C

126

127

128

Text 2AText 2BText 2C

129

130

131

132

table样式2:带背景图的CSS样式表格

133

134

135

Info Header 1

136

Info Header 2

137

Info Header 3

138

139

140

Text 1AText 1BText 1C

141

142

143

Text 2AText 2BText 2C

144

145

146

147

table样式3:自动换整行颜色的CSS样式表格(需要用到JS)

148

149

150

Info Header 1Info Header 2Info Header 3

151

152

153

Text 1AText 1BText 1C

154

155

156

Text 2AText 2BText 2C

157

158

159

160

Text 3AText 3BText 3C

161

162

163

Text 4AText 4BText 4C

164

165

166

Text 5AText 5BText 5C

167

168

169

170

171

table样式4:鼠标悬停高亮的CSS样式表格 (需要JS)

172

173

174

Info Header 1Info Header 2Info Header 3

175

176

177

Item 1AItem 1BItem 1C

178

179

180

Item 2AItem 2BItem 2C

181

182

183

Item 3AItem 3BItem 3C

184

185

186

Item 4AItem 4BItem 4C

187

188

189

Item 5AItem 5BItem 5C

190

191

192

193

194 functionaltRows(id){195 if(document.getElementsByTagName){196

197 vartable=document.getElementById(id);198 varrows=table.getElementsByTagName(“tr”);199

200 for(i= 0; i

210 window.οnlοad=function(){211 altRows(‘alternatecolor‘);212 }213

214

215

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/191236.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • pl sql 循环_sql循环语句怎么写

    pl sql 循环_sql循环语句怎么写1、Loop……endLoop语句标准格式:LOOP statement_list–循环代码块 IFexit_conditionTHEN EXIT;–满足IF条件退出循环 ENDIF;ENDLOOP;–从1开始打印,当i=10退出循环。pl/sql中“=”表示比较,“:=”表示赋值。DECLAREiNUMBER;BEGIN i:=0; LOOP i:=i+1; dbms_output.put_line(i); IF i=

  • Oracle函数之DECODE函数

    Oracle函数之DECODE函数1.语法2.用途DECODE函数将expr与search的值逐个比较。如果expr与search值相等,Oracle返回search相应的result。如果expr与search值都不匹配,Oracle返回default,如果没有函数中没有赋值default,Oracle返回null。这些参数可以是任何数字类型(NUMBER,BINARY_F…

  • HTTP状态500-内部服务器错误[通俗易懂]

    HTTP状态500-内部服务器错误[通俗易懂]SSM整合时出现的问题起初关注点一直在Mapper.xml上,CSDN查询解决方法大致在这样几种。1.SQL语句问题2.resultType返回类型问题(List集合中的参数类型)3.database.properties数据库配置文件问题(Mysql8以上加时区,文件多写了空格,少写了jdbc.)在看到Mysql8加时区这个解决方法时仔细观察了一下报错信息java.lang.ClassNotFoundException:com.mysql.cj.jdbc.Driver会不会是jar包问.

  • JS数组的定义

    JS数组的定义

  • ArrayList扩容机制。

    ArrayList扩容机制。1)直接new一个ArrayList对象时(未指定初始容量大小)是一个空的数组,容量大小为零。publicArrayList(){//DEFAULTCAPACITY_EMPTY_ELEMENTDATA变量为一个空的数组privatestaticfinalObject[]DEFAULTCAPACITY_EMPTY…

  • idea配置lombok.jar(idea安装离线插件)

    项目中经常使用bean,entity等类,绝大部分数据类类中都需要get、set、toString、equals和hashCode方法,虽然eclipse和idea开发环境下都有自动生成的快捷方式,但自动生成这些代码后,如果bean中的属性一旦有修改、删除或增加时,需要重新生成或删除get/set等方法,给代码维护增加负担。而使用了lombok则不一样,使用了lombok的注解(@Setter,@Getter,@ToString,@@RequiredArgsConstructor,@EqualsAndHas

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号