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)


相关推荐

  • simhash的应用范围_Simplorer

    simhash的应用范围_Simplorer目录0x01海量数据文本相似度解决方式SimHash+分词方法+基于内容推荐算法0x02海量simhash查询(1)抽屉原理(2)建立索引(3)判重(4)优化效果(5)权衡时间、空间(6)存储选型0x03比较相似度0x01海量数据文本相似度解决方式SimHash+分词方法+基于内容推荐算法原文链接:海量数据文本相似度解决方式SimHash+…

  • servlet-Filter过滤器

    servlet-Filter过滤器Filter过滤器Filter过滤器是javaweb的三大组件之一,三大组件分别是:Servlet程序,Listener监听器,Filter过滤器Filter过滤器它是javaEE的规范,也就是接口Filter过滤器它的作用是拦截请求,过滤响应拦截请求常见的应用场景:权限检查日记操作事务管理等等原理package at.guitu.com.FIlter;import javax.servlet.FilterChain;import javax.servlet.Filte

  • H264/AVC视频解码时AVC1和H264的区别 .

    H264/AVC视频解码时AVC1和H264的区别 .我一直疑问为什么有些视频解码时显示格式是:H264,大部分又是:AVC1我在搜索编程资料时在微软的msdn上发现的:原文:http://msdn.microsoft.com/en-us/library/dd757808(v=vs.85).aspxFOURCC:AVC1  描述:H.264bitstreamwithoutstartcodes.FOURCC:H264  描述

  • ffmpeg制作视频_跟我学刺绣教学视频教程

    ffmpeg制作视频_跟我学刺绣教学视频教程最近一段时间找时间录制了一些Ffmpeg视频教程,还有录制完毕,会持续更新,内容会包含Ffmeg保存文件,网络流转发,编码,解码,播放器制作,以及服务端搭建等等,适合初学者,有需要的朋友的可以关注:

  • idea 2021.3.4激活码(JetBrains全家桶)[通俗易懂]

    (idea 2021.3.4激活码)本文适用于JetBrains家族所有ide,包括IntelliJidea,phpstorm,webstorm,pycharm,datagrip等。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.html…

  • vue父组件向子组件传值_vue什么是父子组件

    vue父组件向子组件传值_vue什么是父子组件组件化开发是目前前端开发必备的开发技能,组件化开发可以大大提高开发效率今天整理一下Vue的父子组件传值方式,方便还没有理解的朋友学习。1、父组件向子组件传值<!–父组件–><!–父组件调用子组件,看成是调用子组件函数,给子组件传值,就是给函数传参数–><template> <div> <!–传递动态值前面加个…

发表回复

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

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