html表格美化模板,JavaScript + CSS 美化出的条纹表格样式
body{
margin: 6px;
padding: 0;
font-size: 12px;
font-family: tahoma, arial;
background: #fff;
}
table{
width: 100%;
}
tr.odd{
background: #fff;
}
tr.even{
background: #eee;
}
div.datagrid_div{
width: 100%;
border: 1px solid #999;
}
/*****************样式1*******************/
table.datagrid1{
border-collapse: collapse;
border-bottom: 1px solid #666;
}
table.datagrid1 th{
color: #333;
padding: 3px;
font-family: monospace;
background: #9cf;
text-align: left;
border-top: 1px solid #666;
border-bottom: 1px solid #666;
}
table.datagrid1 td{
padding: 3px;
border-top: 1px solid #ccc;
}
/*****************样式2*******************/
table.datagrid2{
border-collapse: collapse;
}
table.datagrid2 th{
text-align: left;
background: #9cf;
padding: 3px;
border: 1px #333 solid;
}
table.datagrid2 td{
padding: 3px;
border: none;
border:1px #333 solid;
}
/*****************样式3*******************/
table.datagrid3{
border-collapse: separate;
}
table.datagrid3 th{
text-align: left;
background: #ddd;
padding: 3px;
border: 0px solid #fff;
}
table.datagrid3 td{
padding: 3px;
border: 0px solid #fff;
}
/*****************样式4*******************/
table.datagrid4{
border-collapse: collapse;
}
table.datagrid4 th{
text-align: left;
background: #ddd;
padding: 3px;
border: none;
}
table.datagrid4 td{
padding: 3px;
border: none;
border-top: 1px solid #fff;
}
/*****************************************/
tr:hover,
tr.hover{
background: #9cf;
}
function add_event(tr){
tr.onmouseover = function(){
tr.className += ' hover';
};
tr.onmouseout = function(){
tr.className = tr.className.replace(' hover', '');
};
}
function stripe(table) {
var trs = table.getElementsByTagName("tr");
for(var i=1; i
var tr = trs[i];
tr.className = i%2 != 0? 'odd' : 'even';
add_event(tr);
}
}
window.onload = function(){
var tables = document.getElementsByTagName('table');
for(var i=0; i
var table = tables[i];
if(table.className == 'datagrid1' || table.className == 'datagrid2'
|| table.className == 'datagrid3' || table.className == 'datagrid4'){
stripe(tables[i]);
}
}
}
样式1
合约 | 最新价 | 涨跌 |
---|---|---|
纽期所原油 | 54.39 | -0.56 |
纽约期金 | 738.5 | 5.8 |
CBOT大豆 | 905.25 | 3.25 |
样式2
合约 | 最新价 | 涨跌 |
---|---|---|
CBOT大豆 | 905.25 | 3.25 |
ideawu.net | 381.25 | 1.25 |
CBOT小麦 | 548.5 | -1 |
样式3
合约 | 最新价 | 涨跌 |
---|---|---|
CBOT大豆 | 905.25 | 3.25 |
ideawu.net | 381.25 | 1.25 |
CBOT小麦 | 548.5 | -1 |
样式4
合约 | 最新价 | 涨跌 |
---|---|---|
CBOT大豆 | 905.25 | 3.25 |
ideawu.net | 381.25 | 1.25 |
CBOT小麦 | 548.5 | -1 |
html表格美化模板,JavaScript + CSS 美化出的条纹表格样式相关推荐
- html中背景条纹效果,CSS制作Web页面条纹背景样式的技巧分享
通过CSS中的linear-gradient主要就能显示出不同方向的条纹效果,这里我们就了解CSS制作Web页面条纹背景样式的技巧分享,需要的朋友可以参考下 一.横向条纹如下代码:background ...
- html5横竖条纹背景,CSS制作Web页面条纹背景样式的介绍
这篇文章主要介绍了关于CSS制作Web页面条纹背景样式的介绍,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 通过CSS中的linear-gradient主要就能显示出不同方向的条纹效果 ...
- apache poi 修改docx表格_word 模板内容的替换和生成word 表格(使用poi)
1. maven 相关依赖 和模板 org.apache.poi poi-ooxml 3.15-beta2 org.apache.poi ooxml-schemas 1.1 2. 工具类中的方法 / ...
- html 美化table,纯CSS美化HTML的Table
今天发觉一个很好的表格CSS代码: http://veerle-v2.duoh.com/blog/comments/a_css_styled_table 整体的CSS代码: body { font: ...
- html美化file按钮,css 美化file按钮
/p> Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ...
- html表格列表模板,前端基础 - HTML(二) 表格、表单、列表
表格 table标签用于定义表格 tr 必须嵌套在table标签中 td 必须嵌套在tr中 表格的基本语法: ↑---border代表边框线 align代表位置 right左边left(右边)cent ...
- 表格 树形结构 HTML CSS,基于jQuery ztree实现表格风格的树状结构
zTree 简介 zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. zTree 是开源免费的软件(M ...
- 在线CSS美化格式化工具
在线CSS美化格式化工具 在线CSS美化格式化工具 美化格式化CSS:压缩缩小CSS 代码以美化.格式化.美化,使你的 CSS 更易于阅读.语法高亮.自动完成功能也可以更轻松地编写代码. 美化格式化C ...
- 怎么用css打表格框,怎么用css美化表格的边框
我们知道Dreamweaver在表格制作方面做得非常出色,但是在某些时候还是必须结合css才能达到一些特定效果,下面我们先把有关表格边框的css语法整理出来,然后另外介绍怎样用css美化表格的边框. ...
最新文章
- 4-10 :selected选中状态选择器
- C#对象映射器之Mapster
- ibatis(1)ibatis的理念
- 第一季1:HI3518EV200的体验
- vc++网络安全编程范例(14)-openssl bio编程
- 查询oracle数据库的表格数据类型,excel表格中如何查询数据库数据类型-我想把excel表格中的数据导入oracle数据库中,想在......
- php 日期时间操作-可算出几天后的时间
- 面向对象编程思想概览(三)继承
- 猜姓氏c语言题目,猜姓氏的谜语及答案
- opencv部署onnx,并对jpg图片进行批量检测生成xml重要信息
- win7下pytorch-gpu安装
- Latex改变图片、表格标题字号
- 从C/C++到Python(之一)(By Robinvane Suen)
- springboot 项目启动报错 url' attribute is not specified and no embedded datasource could be configured
- 如何修改图片像素大小?调整图片大小的简单方法
- 在echarts中圆环图中间 自定义图片引入
- Windows远程桌面卡顿问题(包含网络调优)
- IBM SPSS Modeler使用技巧 ----参数及全局变量的使用
- OSPF规划两大模型:双塔奇兵、犬牙交错
- 上手机器学习前,先来学习下Python相关的环境配置吧~
热门文章
- Python作为移动客户端后台服务器
- 把Excel批注的“红三角”放在单元格左上角_Excel的批注功能,全部知道的不足10%,你会用的仅仅是冰山一角...
- linux 日志查看及操作
- 国产化的接口测试、接口自动化测试工具apifox的介绍及使用
- Keras之Conv2D
- 6W字的Hive讲解只为你更懂它
- java 函数表_C语言、Java语言的符号表区别和特点是什么?分别是如和处理函数参数的?...
- 点击刷新按钮实现listview的数据刷新
- 开发证书与发布证书申请和安装步骤
- DeepLab语义分割