html table专业样式,html 简单的table样式
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
html table专业样式,html 简单的table样式相关推荐
- 还不错的Table样式和form表单样式
作为一个后台开发人员而言,拥有一套属于自己的前台样式是比较重要的,这里分享一下自己感觉还不错的样式,以后遇到好的,还会陆续添加 上图: 带鼠标滑动效果的table样式看起来比较清爽 样式 <he ...
- bootstrap Table API和一些简单使用方法
官网: http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 后端分页问题:后端返回"rows"."& ...
- python-docx 设置Table 边框样式、单元格边框样式
python-docx 设置Table 边框样式.单元格边框样式 from docx.oxml.ns import qn from docx.oxml import OxmlElement from ...
- bootstrap 黑边框表格样式_设置Bootstrap Table表格样式并隔行变色
设置Bootstrap Table表格样式并隔行变色 设置bootstrap-table表格样式可以通过设置classess属性进行设置,官方默认支持黑色主题.隔行变色等样式,你也可以自定义样式把你的 ...
- php修改table样式,CSS怎么设置table边框样式
今天和大家说一下CSS如何设置table表格边框样式,对table设置CSS样式边框分为4种情况,以下分别详细讲解这四种情况需要怎么处理. 1.只对table设置边框 2.对td设置边框 3.对tab ...
- css+js简单实现table固定首行首列
说明: 使用easyui等都可以实现table固定首行首列的功能. 但仅仅只需要这一个功能,完全可以用css+js简单实现而不用引入更多工具. 网上找到很多的思路,自己对其中比较简单的一个进行了整理. ...
- html设置table border,用css来设置table的border
在网页中table是一种很好的展示数据的标签.默认情况下,table是没有border的,但是我们为了好看,经常要给table加上border.而且IE7/8/9下border的颜色还不一样,下面我们 ...
- layui table动态选中_layui后台管理—table 数据表格详细讲解
1.layui介绍 layui是一款采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用,非常适合界面的快速开发.layui区别于那些基于MVVM底 ...
- elementui table 固定列_element-ui 中的table的列隐藏问题解决
element-ui 中的table和bootstrap中的table的某些设置还是有一定的差别的.之前用bootstrap做的表格,想要实现简短列和详细列的切换.因为详细列实在有太多列了,拉动滚动条 ...
最新文章
- JQuery事件绑定,bind与on区别
- ubuntu 16.04 分辨率只有800×600问题解决
- 机器学习(MACHINE LEARNING)MATLAB非线性曲线拟合方法
- 100.X86的寻址方式
- 成功解决VirtualBox is not installed. Please re-run the Toolbox Installer and try again.
- 学好python薪水有多少笔画_Python学到什么程度可以面试工作?
- 第四篇:整合Thymeleaf模板
- Web MIDI API W3C
- 解决Django Rest Framework中的跨域问题
- Spring MVC Maven 环境搭建与部署
- 大学计算机基础简历制作,WORD制作新年贺卡和个人简历大学计算机基础课程设计报告书.doc...
- 时间序列学习(4):平稳性检验(单位根检验、ADF检验)
- VM虚拟机安装及使用
- 最近在关注浏览器,先转一篇游戏浏览器的评测。
- linux中静态IP的配置及检测
- linux ps 简书,Linux小白学习法宝-命令大全第一部分
- 如何去掉图片上的水印,四个步骤,方法超级容易又简单
- Sourcetree 分支合到主干
- CSS 中的 background 背景属性命令大全
- 4.12 使用反相命令反转图片色彩 [原创Ps教程]
热门文章
- [译]Effective Kotlin系列之考虑使用原始类型的数组优化性能(五)
- 开源SPL助力JAVA处理公共数据文件
- JSDOM和BOM学习第五天(下)
- 惠普服务器螺丝钉型号,【惠普 MicroServer Gen8 服务器开箱展示】包装|成色|外壳|螺丝_摘要频道_什么值得买...
- blender的动画到底导出图片序列形式还是视频形式
- 【Airtest】实现UI自动化测试(一)
- C++函数返回右值引用
- 明锐更换变速箱油方法
- 不多于 5 位的正整数逆序输出(python)
- python定义数组长度_python数组要先定义长度吗